Geri sayım bileşeni: Angular2'de yeniden oluşturma nasıl önlenir?

Question

Bir dizi alt bileşen ve bir bağımsız geri sayım bileşeni (aşağıdaki kodda "saat" olarak adlandırılmış) içeren bir Angular2 ana bileşenim var. Geri sayım bileşeni, etiketini her saniye değiştirir ve bu da ana bileşenin ve diğerlerinin (gereksiz yere) yeniden oluşturulmasına neden olur. Bunu nasıl önleyebilirim?

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 ; 
    } 
} 

ve bunu "my-app" başkalarının yanında gömülü olan tahmin edebilirsiniz;: Bu benim geri sayım bileşeninin kaynağıdır (Yorum başına)

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

EDIT: gibi bir şey Ben aşağıdaki resme bakın, diğer bileşenler (nav ve soruya console.log çıktı ekledik: Ben yeniden işlemek demek, bu ne olduğudur ) çeşitli işleme eylemlerinde, örneğin, bir bileşenin bir sınıf bağlayıcısı vardır, örneğin: [class.selected] = "isSelected" ve isSelected() yöntemine console.log() ekledim ve Geri sayım (saat) kendini her yenilendiğinde her saniyede denir. NAV ve soru bileşenlerini etkilemeden ve yeniden oluşturulmasına neden olmadan etiketi değiştirmek için geri sayım yapmak istiyorum (örneğin 30 dakikadan geri sayım).

DÜZENLEME (2): Burada

Ve plunker şudur: "? Q-nav IsSelected" http://plnkr.co/edit/PwBfUQXyZyTrqPaqrwRm?p=preview

Yangın yukarı konsol ve altı olanlar için izlemek her saniye görünecek (qnav bileşeninden yazdırılmış).

Answer 1

Bu Açısallar, her olayda çağrılan algılamayı değiştirir (setInterval geri çağırma çağrısı da böyle bir olaydır).

Çok algılanması sadece bir @Input() güncellenir gerçekleşir veya daha fazla ayrıntı için 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 
}) 

çağıran yöntemlerle, örneğin explicitely değişiklik algılama çağırdığınızda http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

bkz değiştirmek OnPush değişiklik algılama cadı olabilir