Angular 2中的ChangeDetectionStrategy.OnPush和Observable.subscribe

Question

我試圖在使用Observables旁邊的ChangeDetectionStrategy.OnPush時，圍繞最佳實踐環繞我的頭。

的例子演示了想要表現出一定的加載消息（或者簡單的微調動畫也許）的常見場景：

Plnkr here

@Component({ 
    selector: 'my-app', 
    template: `Are we loading?: {{loadingMessage}}`, 

    // Obviously "Default" will notice the change in `loadingMessage`... 
    // changeDetection: ChangeDetectionStrategy.Default 

    // But what is best practice when using OnPush? 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class App implements OnInit { 

    private loadingMessage = "Wait for it..."; 

    constructor() { 

    } 

    ngOnInit() { 

    // Pretend we're loading data from a service. 
    // This component is only interested in the call's success 
    Observable.of(true) 
     .delay(2000) 
     .subscribe(success => { 

     if(success){ 
      console.log('Pretend loading: success!'); 

      // OnPush won't detect this change 
      this.loadingMessage = 'Success!'; 
     } 

     }); 

    } 
} 

我或多或少理解具有不變性的要求OnPush，對我而言，至少在討論實際模型數據（可能在某種商店中持有）時它是有意義的。

所以，我有兩個問題：

1. 爲什麼沒有新的字符串值的分配'Success!'觸發這種改變探測器？就不變性而言，價值已經改變了，對嗎？
2. 使用ChangeDetectionStrategy.OnPush時應該如何實現輕量級內部組件狀態（即loadingMessage）？如果有多種最佳實踐，請指出正確的方向。

Answer 1

好問題。我有兩個報價從Savkin約onPush（因爲Angular.io文檔似乎沒有對這個話題的任何信息尚未）：

該框架將檢查，只有當它們的輸入改變OnPush部件或組件的模板發射事件。 - ref

當使用OnPush時，Angular將只檢查組件的任何輸入屬性發生變化，觸發事件時，或者當observable觸發事件時。 - ref（在@vivainio的評論回覆中）

第二個引用看起來更加完整。 （太糟糕了，它被埋葬在一個評論！）

爲什麼沒有新的字符串值的分配Success!觸發 變化檢測？就不變性而言，價值已經改變了，對嗎？

OnPush不變性是指輸入屬性，而不是一般的實例屬性。如果loadingMessage是輸入屬性並且值已更改，則將在組件上執行更改檢測。 （請參閱@ Vlado對Plunker的回答。）

應該如何輕質內部組件狀態（即，loadingMessage）使用ChangeDetectionStrategy.OnPush時執行？如果有多種最佳實踐，請指出正確的方向。

這是我目前所知：

• 如果我們改變內部狀態的處理可觀察射擊的事件，或者一部分一部分地改變檢測執行OnPush組件（即，視圖將更新）。在你的具體情況下，我對這個觀點沒有更新感到驚訝。這裏有兩個猜測爲什麼不是：
  • 添加delay()使角度看它更像一個setTimeout()而不是一個可觀察的變化。 setTimeout s不會導致OnPush組件上的更改檢測執行。在您的示例中，更改檢測器在loadingMessage的值更改前2秒完成了其工作。
  • 就像@Sasxa在他的回答中所示，您必須在模板中對Observable進行綁定。也就是說，它可能不僅僅是「可觀察到的火災」......也許它必須是可觀察到的火災發生的界限。在這種情況下，創建loadingMessage（或甚至更通用的state屬性）作爲Observable本身將允許您將模板綁定到其值（或多個異步值），請參閱this example plnkr。
    更新2016-04-28：它看起來綁定必須包括| async，如plnkr所示，並在this plnkr。
• 如果我們改變內部狀態，它不是事件處理或可觀察到的點火部分，我們可以注入ChangeDetectorRef到我們的組件並調用方法markForCheck()引起變化檢測到OnPush組件和所有祖先組件上執行直到根組件。如果只改變視圖狀態（即，對於組件本地的狀態並且可能是其後代），則可以使用detectChanges()來替代，其不會標記用於改變檢測的所有祖先組件。 Plunker

Answer 2

據我所知，OnPush正在directly with observables時使用：

//our root app component 
import {Component, OnInit, ChangeDetectionStrategy} from 'angular2/core' 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Component({ 
    selector: 'my-app', 
    template: `Are we loading?: {{ loadingMessage |async }}`, 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class App implements OnInit { 
    private loadingMessage; 
    constructor() { } 

    ngOnInit() { 
    this.loadingMessage = Observable.of(true) 
     .delay(2000) 
    } 
} 

Answer 3

有了這個ChangeDetectionStrategy.OnPush你告訴你的組件只監聽更改它的輸入特性。

我添加加載組件到你的例子只是向你展示它是如何工作的： http://plnkr.co/edit/k5tkmcLlzkwz4t5ifqFD?p=preview