没有zone.js的Angular Material组件

Question

因为我的一个angular11应用程序的性能问题，我决定选择退出{ngZone: noop}的zone.js。我仍然使用angular的材料组件，但没有zone.js，其中一些将无法正常工作。例如，MatTooltip不会被渲染，即使我手动触发mouseenter上的ChangeDetection，工具提示也会漂浮在页面的顶部。

是否有一个解决方案来使用材料组件没有区域。js?我准备了一张斯塔克布里茨来展示我的问题。悬停按钮，你会看到奇怪的行为。

认为问题与它创建的overlayRef有关，因此使用了PositionStrategy。

谢谢你的帮助。

Answer 1

我是这个库的作者

您可以安装库并将库的模块添加到AppModule的imports数组中。
之后材料应该可以工作了:

import { ZonelessModule } from 'az-zoneless'
@NgModule({
declarations: [
...
],
imports: [
...,
ZonelessModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}

安装库后，您可以使用azClick事件以获得更好的性能，并且不再需要在事件上调用ChangeDetectorRef.detectChanges。