ChangeDetectionStrategy.OnPush和Observable.subscribe在Angular 2中。

16 浏览
0 Comments

ChangeDetectionStrategy.OnPush和Observable.subscribe在Angular 2中。

我试图理解在使用Observables和ChangeDetectionStrategy.OnPush时的最佳实践。

这个示例展示了一个常见的场景，即想要显示某种加载消息（或者简单的旋转动画）：

Plnkr链接

@Component({
  selector: 'my-app',
  template: `我们正在加载中吗？：{{loadingMessage}}`,
  // 显然，“Default”会注意到`loadingMessage`的变化...
  // 但是在使用OnPush时，最佳实践是什么？
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App implements OnInit {
  private loadingMessage = "请稍候...";
  constructor() {
  }
  ngOnInit() {
    // 假装我们正在从服务中加载数据。
    // 这个组件只关心调用是否成功
    Observable.of(true)
      .delay(2000)
      .subscribe(success => {
        if(success){
          console.log('假装加载：成功！');
          // OnPush不会检测到这个变化
          this.loadingMessage = '成功！';
        }
      });
  }
}

我或多或少地理解了在使用OnPush时对不可变性的要求，至少对我来说，当谈到实际的模型数据（可能保存在某种存储中）时，这是有道理的。

所以，我有两个问题：

  1. 为什么给新的字符串值'Success!'赋值不会触发变更检测器？就不可变性而言，值已经发生了变化，对吗？
  2. 在使用ChangeDetectionStrategy.OnPush时，应该如何实现轻量级的内部组件状态（例如loadingMessage）？如果有多个最佳实践，请指点我正确的方向。
0