Обнаружение угловых изменений для обновления только частичной страницы

Question

Я работаю над угловым приложением 5.2. У меня есть 10 вкладок в моем базовом компоненте. и каждая вкладка имеет свой собственный компонент ( 4 компонента). Так что каждая моя вкладка имеет очень тяжелую обработку. Теперь мой вопрос: если я обновлю какой-либо дочерний компонент Tab, то angular запустит changeDetection на всех вкладках и их дочернем компоненте, что сделает мое приложение очень медленным.

Есть ли способ сообщить угловому запуску Change-Detection в определенной части страницы? Я знаю, это звучит немного странно, но мне нужно улучшить производительность приложения, и реальная проблема, я вижу, в том, что обнаружение изменений запускается для всей страницы ( 10 вкладок и каждая вкладка с 4 компонентами).

На данный момент я не публикую никакого кода, так как этот вопрос является общим, но если кто-то считает, что этот код будет полезным, я тоже могу это сделать.

Answer 1

Ты можешь использовать ChangeDetectionStrategy.OnPush

import {..., ChangeDetectionStrategy } from '@angular/core';

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  @Input() data;
}

Вручную пометить для обнаружения изменений.

import {..., ChangeDetectorRef } from '@angular/core';

export class CounterComponent {
    constructor(private cd: ChangeDetectorRef) {}
  ...
  ngOnInit() {
    this.data.subscribe((value) => {
      this._data = value;
      // tell CD to verify this subtree
      this.cd.markForCheck();
    });
  }
}

Обратитесь к документу для получения информации: https://angular.io/api/core/ChangeDetectorRef

Answer 2

Вы можете использовать ловушку жизненного цикла ngDoCheck, чтобы проверить мутацию объекта и уведомить Angular с помощью метода markForCheck.

---

export class AComponent {
  @Input() o;  constructor(private cd: ChangeDetectorRef) {}

  ngOnChanges() {
    // every time the object changes 
    // store the new `id`
    this.id = this.o.id;
  }

  ngDoCheck() {
    // check for object mutation
    if (this.id !== this.o.id) {
      this.cd.markForCheck();
    }
  }
}