“材质”对话框中的去BounceTime runOutsideAngular
我试图在mat对话框弹出窗口中过滤对象列表。我基于我的实现来避免在每个keyUp事件中运行角度变化检测 在实现我的过滤器之后,我通过控制台登录“材质”对话框中的去BounceTime runOutsideAngular,angular,modal-dialog,angular-material,angular-changedetection,Angular,Modal Dialog,Angular Material,Angular Changedetection,我试图在mat对话框弹出窗口中过滤对象列表。我基于我的实现来避免在每个keyUp事件中运行角度变化检测 在实现我的过滤器之后,我通过控制台登录ngDoCheck验证了更改检测周期。似乎每个键控事件都触发了几个变化检测周期 我找到了我举的例子和我的文章之间的区别:我在一个材质对话框组件中 我准备了一本书来展示它。FormComponent集成了两次,一次直接集成在AppComponent中,一次集成在mat对话框中。打开控制台,观察cd和筛选字符串,分别记录更改检测周期和项目筛选。您会注意到,在使
ngDoCheck
验证了更改检测周期。似乎每个键控事件都触发了几个变化检测周期
我找到了我举的例子和我的文章之间的区别:我在一个材质对话框组件中
我准备了一本书来展示它。FormComponent
集成了两次,一次直接集成在AppComponent
中,一次集成在mat对话框中。打开控制台,观察cd
和筛选
字符串,分别记录更改检测周期和项目筛选。您会注意到,在使用对话框版本时,有大量的cd
完整代码在
是否有办法在mat对话框中停用变更检测?
如果有,副作用是什么
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
事件中,以获取可访问性快捷方式并触发更改检测。请随意分享您的想法。这可能是一个有趣的讲座。但是设置OnPush
更改检测策略没有帮助。我的组件的onDoCheck
生命周期钩子仍然在每次keyUp
事件中被多次调用。我在讲座中进一步了解了变化检测的实际工作原理。我尝试使用changeDetectorRef.detach()
,但没有成功。我怀疑mat对话框
为keyUp
事件注册自身,从而触发其视图子项(=我的组件)中的更改检测。我将用这些提示更新我的问题,以帮助调查。我怀疑mat对话框注册了keyUp事件,并因此在其视图children中触发更改检测。
您就在这里。这是OverlakeyBoardDispatcher
打开mat对话框时,我是否有可能停用此OverlakeyBoardDispatcher
?您找到解决方案了吗?