不使用zone.js的Angular Material组件

Question

由于我的一个Angular 11应用程序出现性能问题，我决定使用 { ngZone: noop } 退出 zone.js。我仍然在使用 Angular 的 Material 组件，但是没有 zone.js，其中一些组件将无法正常工作。例如，MatTooltip 将不会呈现，即使我手动触发 mouseenter 上的 ChangeDetection，工具提示也会漂浮在页面顶部。

有没有绕过使用 zone.js 的材料组件的方法？我准备了一个 Stackblitz 来展示我的问题。悬停在按钮上，您将看到奇怪的行为。

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

感谢任何帮助。

- Draftsman

---

好的，以下是对该 GitHub 问题页面的翻译：问题描述： 当使用 Angular Material 的滚动条组件时，无法在 Firefox 浏览器中纵向滚动。解决方案： 此问题的根源是 Firefox 浏览器不支持 -webkit-overflow-scrolling 样式属性。要解决这个问题，您可以通过简单地将 MatScrollbar 组件的 showThumbs 属性设置为 false 来禁用滚动条的自定义样式，并使用浏览器默认的滚动条样式。示例代码： - yurzui

我遇到了同样的问题。有什么解决方法吗？如果没有，我会查看DOM Mutation Observer。 - Rameez Rami

Answer 1

我是这个库的作者：zoneless。

您可以安装该库并将其模块添加到AppModule的导入数组中。
之后，材料应该可以正常工作：

import { ZonelessModule } from 'az-zoneless'

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

安装库后，您可以使用azClick事件来提高性能，并消除在事件上调用ChangeDetectorRef.detectChanges的需要。

- Yariv Katz