倒计时组件：Angular2 中如何防止重新渲染？

Question

我有一个 Angular2 主组件，其中包括许多子组件和一个独立的倒计时组件（在下面的代码中名为“时钟”）。倒计时组件每秒都会更改其标签，这会导致主组件和所有其他组件（不必要地）重新渲染。我怎样才能防止这种情况发生？ 这是我的倒计时组件的来源：

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'clock',
    template: `
        <span>
            {{caption}}
        </span>
    `
})
export class ClockComponent {
    public caption;
    @Input('seconds') seconds :number = 0;
    constructor() {
      var self = this;
      setInterval(function(){
            self.seconds--;
            self.caption = self.getCaption(self.seconds);
      }, 1000);
      this.caption = this.getCaption(this.seconds);
    }

    getCaption (seconds): string {
        let h = Math.floor(seconds / (60*60));
        let m = Math.floor((seconds - 60 * 60 * h) / 60);
        let s = seconds % 60;
        return ((h < 10) ? '0' : '') + h + ':'
             + ((m < 10) ? '0' : '') + m + ':'
             + ((s < 10) ? '0' : '') + s ;
    }
}

您可以想象它与其他应用程序一起嵌入“我的应用程序”中；像这样的东西：

<clock [seconds]="1800"></clock>
<other-comps>...</other-comps>...

编辑（每条评论）： 当我的意思是重新渲染时，会发生以下情况： 我已经在各种渲染操作上向其他组件（导航和问题，参见下图）添加了 console.log 打印输出，例如，组件具有类绑定器，例如： [class.selected]="isSelected" 我已将 console.log() 添加到 isSelected() 方法中，因此可以发现它每秒被调用一次，每次倒计时（时钟）自行刷新时。我希望倒计时更改标签（例如从 30 分钟开始倒计时），而不影响导航和问题组件并导致它们重新渲染。

编辑（2）：

这是一个骗子：http://plnkr.co/edit/PwBfUQXyZyTrqPaqrwRm?p=preview

启动控制台并观察六个“q-nav isSelected?”每秒出现一次（从 qnav 组件打印）。

Answer 1

这就是 Angular 的变化检测，它会在每个事件上调用，而

setInterval

调用回调就是这样一个事件。

您可以将更改检测切换为

OnPush

，因此更改检测仅在

@Input()

更新时或显式调用更改检测时进行，例如通过调用

ChangeDetectorRefs

上的方法

import {Component, Input, OnInit, EventEmitter, Output, OnChanges, ChangeDetectionStrategy} from 'angular2/core';
@Component({
    selector: 'q-nav',
    template: `
        <span *ngFor="#a of currAnswers; #i = index" class="aii-qn"
            [class.selected]="isSelected(i)"
            (click)="onSelect(i)">
            <span class="badge">{{ i+1 }}</span>
        </span>
    `,
    styles: [`
        .aii-qn {
            color: #0000ff;
            cursor: pointer;
            font-size: 2rem;
        }
        .selected {
            border: black solid 2px;
        }

    `],
    changeDetection: ChangeDetectionStrategy.OnPush
})

更多详情请参阅：
http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html