DebounceTime runOutsideAngular в диалоговом окне материала

Question

Я пытаюсь отфильтровать список объектов во всплывающем окне диалогового окна. Я основал свою реализацию на этом очень хорошем посте, чтобы не запускать обнаружение угловых изменений при каждом событии keyUp.

После реализации моего фильтра я проверил вход в консоль ngDoCheck циклы обнаружения изменений. Оказалось, что каждое событие keyUp запускало несколько циклов обнаружения изменений.

Я выяснил, в чем разница между постом, который я взял в качестве примера, и моим: я нахожусь в компоненте Material Dialog.

Я подготовил пример стекаблица, чтобы показать это. FormComponent интегрируется дважды, один раз прямо в AppComponent и однажды в течение mat-dialog, Откройте консоль и наблюдайте за cd а также filtering строки, в которых регистрируются изменения циклов обнаружения и фильтрации элементов соответственно. Вы заметите, что когда вы используете диалоговую версию, существует очень большое количество cd,

Полный код по этому адресу

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

API MatDialog не содержит ничего похожего на то, что я ищу...

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

Надеюсь, кто-то может помочь!

редактировать

На основе комментариев я попытался переключить ChangeDetectionStrategy на onPush (это не должно иметь никакого побочного эффекта, поскольку привязка выполняется с отфильтрованным списком, который переназначается после времени отката). Это, однако, не помогает.

Я также попытался отсоединить свой компонент от обнаружения изменений с помощью следующего кода:

ngAfterViewInit() {
  this.ngzone.runOutsideAngular(() => {
    this.filterChangedSubscription = Observable.fromEvent(this.itemfilter.nativeElement, 'keyup')
    .debounceTime(600)
    .subscribe((keyboardEvent: any) => {
      this.items = this.unfilteredItems.filter(
        item => item.toLowerCase().indexOf(keyboardEvent.target.value.toLowerCase()) > -1
      );
      this.cdref.detectChanges();
    });
  });
  this.cdref.detach();
}

Я пытался отключить обнаружение изменений для моего компонента (удерживая вход, запускающий фильтр), но кажется, что ловушки обнаружения изменений все еще будут вызываться по несколько раз в каждом keyUp событие.

Я подозреваю mat-dialog компонент для регистрации keyUp события для ярлыков доступности и запуска обнаружения изменений. Не стесняйтесь делиться своими мыслями.

Answer 1

ngDoCheck()не гарантирует, что обнаружение изменений запущено.

https://stackblitz.com/edit/angular-trqwq2?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Здесь я обновил ваш пример. Кстати: здесь можно забиндить выходы во внешнюю зону:

https://blog.simplified.courses/running-outputs-outside-zonejs-for-angular-performance-optimization/

Надеюсь, поможет