4

我想摆脱我的应用程序中的区域。我正在考虑触发更改检测的几个选项:

  1. 通过在模板中使用的属性的每次更新时在组件中调用this.changeDetectorRef.detectChanges()/来手动触发更改检测。ΘmarkDirty(this)像这样的东西:
// extra side effect for observables:
readonly todos$ = this.todosService.getTodos().pipe(
  tap(() => this.cdr.detectChanges()), // or `ΘmarkDirty(this)`
);

// or local state
toggle() {
  this.isOpen = !this.isOpen;
  this.cdr.detectChanges(); // or `ΘmarkDirty(this)`
}
<div [class.open]="isOpen">
  <!-- AsyncPipe will invoke `ChangeDetectorRef#markForChanges()` which does nothing without zones -->
  {{ todos$ | async | json }}
</div>
  1. PushPipe这样。该管道与内置管道非常相似,AsyncPipeChangeDetectorRef#markForChanges它调用的是ChangeDetectorRef#detectChanges. 考虑到即将发布的 Ivy,我应该准备好调用ΘmarkDirty(this)wherethis是对组件实例的引用。我可以通过注入ViewRefcontext属性获取对组件实例的引用,但该属性是私有的,依赖私有 API 是个坏主意。是否有任何官方方法可以在此组件模板中使用的管道中获取组件实例引用?

  2. ReactiveComponent这样。这种方法强制从父类继承一些基本功能。我希望人们ngOnDestroy$在子类中覆盖而忘记调用super.ngOnDestroy$(). 我们不能强制对生命周期钩子方法进行适当的覆盖,对吧?

  3. @observed像这样的装饰器。这种方法严重依赖于Θ- 前缀的函数和属性,这些函数和属性可能会发生变化。此外,它感觉有点hacky,所以在生产中使用它太冒险了,对吧?

您更喜欢哪种方法?我错过了更好的选择吗?

4

0 回答 0