Question

我正在尝试在mat-dialog弹出窗口中过滤对象列表。我的实现基于this very good post，以避免在每个keyUp事件中运行Angular变化检测。

在实施我的过滤器之后，我在ngDoCheck的控制台日志中验证了更改检测周期。似乎每个keyUp事件都触发了几个变化检测周期。

我想出了我作为例子和我的帖子之间的区别：我在一个Material Dialog组件中。

我准备了stackblitz example来展示它。 FormComponent已整合两次，一次直接在AppComponent中，一次在mat-dialog内。打开控制台并观察cd和filtering字符串，它们分别记录更改检测周期和项目过滤。您会注意到，当您使用对话框版本时，会有大量cd。

this address

处的完整代码

有没有办法在mat-dialog中停用更改检测？如果是，有什么副作用？

MatDialog的API不包含任何与我正在搜索的内容相近的内容......

请注意我的代码执行正常，但是更高的更改检测周期可能会降低较慢设备上的应用性能。

希望有人可以提供帮助！

修改

根据评论，我尝试将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事件以获取辅助功能快捷方式并触发更改检测。随意分享您的想法。

材质对话框中的DebounceTime runOutsideAngular

0 个答案: