Angular2每秒更新我的时钟

Question

我正在Angular2 中处理一些事情，我需要每秒更新我的clock。 我只是不知道如何让我的clock 像现在这样工作，每秒更新一次。

这是我的 COMPONENT.TS 文件：

         import { Component } from '@angular/core';
         import { DatePipe } from '@angular/common';

         @Component({
            selector: 'page-header',
            templateUrl: './pageheader.component.html',
            styleUrls: ['./pageheader.component.css']
         })

         export class PageHeaderComponent {

              Housestyle = 'Dit is de huisstyle'

              Clock = Date.now();
         }

这是我的 HTML：

       <div id="container">
            <div id="left">{{Housestyle}}</div>
            <div id="right">{{Clock | date:'HH:mm'}}</div>
            <div id="center"></div>
       </div>

Answer 1

     import { Component } from '@angular/core';
     import { DatePipe } from '@angular/common';

     @Component({
        selector: 'page-header',
        templateUrl: './pageheader.component.html',
        styleUrls: ['./pageheader.component.css']
     })

     export class PageHeaderComponent {

          Housestyle = 'Dit is de huisstyle'

          Clock = Date.now();

          public ngOnInit() {
            setInterval(() => {
              this.Clock = Date.now();
            }, 1000);
          }
     }

并在模板的过滤器中添加seconds

<div id="right">{{Clock | date:'HH:mm:ss'}}</div>

Answer 2

使用间隔。

import {Observable} from 'rxjs/Rx';

Observable.interval(1000).subscribe(x => {
    Clock = Date.now();
});