DebounceTime runOutsideAngular в диалоговом окне материала - PullRequest
Новая
       41

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

0 голосов
/ 03 июня 2018

Я пытаюсь отфильтровать список объектов во всплывающем окне диалогового окна.Я основал свою реализацию на этом очень хорошем посте , чтобы избежать запуска обнаружения угловых изменений при каждом событии 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 событиях для ярлыков доступности и запуска обнаружения изменений.Не стесняйтесь делиться своими мыслями.

...