没有 zone.js 的 Angular 材质组件

Question

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

是否有解决方法可以在没有 zone.js 的情况下使用材质组件？我准备了一个Stackblitz来展示我的问题。将鼠标悬停在按钮上，您会看到奇怪的行为。

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

谢谢你的帮助。

Answer 1

我是这个库的作者

您可以安装该库并将该库的模块添加到AppModule.
之后材料应该可以工作：

import { ZonelessModule } from 'az-zoneless'

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    ZonelessModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

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