Angular material mat-menu 的角度性能问题

Question

我在使用 Angular 4 时遇到问题，我有一个组件列表，每个组件内部都有一个 mat-menu（Angular 材料组件）。 我在 Chrome 控制台中收到很多警告：

“[违规] 将非被动事件侦听器添加到滚动阻塞 'touchstart' 事件。考虑将事件处理程序标记为 '被动' 以使页面更具响应性。”

我已经删除了该组件，并且可以看到警告数量已经减少。 你们有人知道那里发生了什么吗？ mat-menu 中有什么东西触发了那个警告？

Answer 1

您正在使用 Angular 4。这是一个非常旧的版本。 考虑到 angular 4 的年龄，chrome 中的违规警告相对较新。 这意味着较新版本的 angular 和材料库已更新以防止出现此警告。

您摆脱此警告的唯一方法是降级铬或最终更新您的角度（和材料）版本

---

如果您无法更新，您可以创建一个 事件管理器插件。 有了这个，您可以在事件绑定到元素时捕获事件。 这可能是然而，在材料中的事件不绑定这种方式，并使用其中任何一个立即绑定fromEvent从rxjs或标准element.addEventListener ，但你可以尝试：

在您的 AppModule 中，您添加此提供程序：

import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';

@NgModule({
  providers: [
    {
      provide: EVENT_MANAGER_PLUGINS,
      useClass: PassiveEventsOptionPlugin,
      multi: true
    }
  ]
})
export class AppModule {}

你的事件插件可以是这样的。 同样，这是未经测试的：

@Injectable()
export class PassiveEventsOptionPlugin {
  private readonly passiveEvents = [
    'touchstart'
  ];

  constructor(@Inject(DOCUMENT) private doc: any) {}

  supports(eventName: string): boolean {
    return this.passiveEvents.some((event) => eventName.startsWith(event));
  }

  addEventListener(el: HTMLElement, event: string, listener: EventListener): () => void {
    // this is the important part. Adding the passive option
    const options = { passive: true };
    element.addEventListener(type, listener, options);

    return () => element.removeEventListener(type, listener, options);
  }

  addGlobalEventListener(
    element: GlobalEventTarget,
    eventName: string,
    listener: EventListener
  ): () => void {
    let target: EventTarget | undefined;

    if (element === 'window') {
      target = window;
    } else if (element === 'document') {
      target = this.doc;
    } else if (element === 'body' && this.doc) {
      target = this.doc.body;
    }

    return this.addEventListener(target as HTMLElement, eventName, listener);
  }
}