Angular 2实时刷新应用程序
我是Angular和Nodejs的新手，我正在尝试构build一个平均堆栈的encryption货币交换应用程序。 我创build了一个nodejs后端从API获取当前汇率并将其显示在html中。 另外我创build了货币兑换组件并且工作正常。 我需要每5或10秒更新html和货币兑换组件。
我的第一个问题是，如果在后端或前端做得更好，其次是我如何做到这一点。
这是我的代码：
api.js
const express = require('express'); const router = express.Router(); // declare axios for making http requests const axios = require('axios'); const coinTicker = require('coin-ticker'); /* GET api listing. */ router.get('/', (req, res, next) => { res.send('api works'); }); router.get('/posts', function(req, res, next) { coinTicker('bitfinex', 'BTC_USD') .then(posts => { res.status(200).json(posts.bid); }) .catch(error => { res.status(500).send(error); }); }); module.exports = router; prices.component
import { Component, OnInit } from '@angular/core'; import { PricesService } from '../prices.service'; import { Observable } from 'rxjs'; @Component({ selector: 'app-posts', }) export class PricesComponent implements OnInit { // instantiate posts to an empty array prices: any; targetAmount = 1; baseAmount = this.prices; update(baseAmount) { this.targetAmount = parseFloat(baseAmount) / this.prices; } constructor(private pricesService: PricesService) { } ngOnInit() { // Retrieve posts from the API this.pricesService.getPrices().subscribe(prices => { this.prices = prices; console.log(prices); }); } }
Prices.service
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class PricesService { constructor(private http: Http) { } // Get all posts from the API getPrices() { return this.http.get('/api/posts') .map(res => res.json()); } }
HTML
<div class="form-group"> <label for="street">Tipo de Cambio</label> <input type="number" class="form-control" id="street" [value]="prices" disabled> CLP = 1 BTC </div>
如果您希望每隔5秒或10秒进行一次定期轮询，那么使用networking工作者是没有好处的 一般来说，networking工作者将对聊天应用等双向通信非常有用。
我认为在你的情况下，你可以使用客户端正常轮询。 使用rxjs实现客户端轮询非常容易。
return Observable.interval(5000) // call once 5 per second .startWith(0) .switchMap(() => { return this.http.get('/api/posts') .map(res => res.json()) }) .map(value => value[0]);