Угловой 5 - как ограничить обнаружение изменений только областью действия компонента?

Question

Как настроить угловой компонент, чтобы не запускать обнаружение изменений для всего приложения, а только для самого компонента и его дочерних элементов?

Рабочий пример: 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();
}