Question

如何配置Angular组件而不触发整个应用程序的更改检测，而仅触发组件本身及其子代的更改检测？

工作示例：https://stackblitz.com/edit/angular-irc-starter-4txpbu?file=app%2Ftimer%2Ftimer.component.ts

有一个计数器，每秒增加一个值。它是TimerComponent，并且按预期方式工作-每秒增加和更新值。

@Component({
  selector: 'app-timer',
  template: `{{value}}`
})
export class TimerComponent implements OnInit {
  value: number = 0;
  ngOnInit() {
    setInterval(() => this.value++, 1000);
  }
}

但是，请查看父组件AppComponent。

<h3>Internal timer:</h3>
<p>Should not perform change detection for the whole app</p>
<app-timer></app-timer>

<h3>External binding</h3>
<p>Should not be updated after timer changes</p>
<p>{{someBindingProperty}}</p>

someBindingProperty 是一种吸气剂：

get someBindingProperty() {
  this.bindingTimer++;
  return this.bindingTimer;
}

问题：当TimerComponent增加值时，将为整个应用程序触发更改检测。是否可以仅在组件和子组件内触发更改检测？

注意：如果我添加到TimerComponent：

changeDetection: ChangeDetectionStrategy.OnPush

然后在此组件中未检测到更改，但仍会为整个应用程序触发更改检测。所以这不是解决方案。

Answer 1

另一个临时禁用更改检测ChangeDetectorRef的选项

enabled = true;  
constructor(private ref: ChangeDetectorRef)

toggleChangeDetection() {
  if (this.enabled) 
  {
    this.enabled = false;
    this.ref.detach();
  }
  else {
    this.enabled = true;
    this.ref.reattach();
}

Angular 5-如何将更改检测仅限于组件范围？

1 个答案: