Angular 角度材料垫菜单的角度性能问题

我对Angular 4有个问题，我有一个组件列表，每个组件都有一个mat菜单（Angular material component）。 我在Chrome控制台上收到了很多警告：

（违规）将非被动事件侦听器添加到滚动块“ToucStEngt”事件中。将事件处理程序标记为“被动”以使页面更加响应。“

” 我已经删除了该组件，正如我所看到的，警告的数量已经减少。

---

你们知道那里发生了什么吗？mat菜单中是否有什么东西触发了该警告？

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

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

---

如果无法更新，则可以创建。有了它，您可以在事件绑定到元素时捕获它们。但是，可能材料中的事件不是以这种方式绑定的，而是使用rxjs中的

fromEvent

或标准

元素立即绑定的。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);
  }
}

---

谢谢你的回复。你还有其他选择吗？有一个选择，但它是非常没有文件记录的。我会用（未测试的）代码更新我的答案谢谢你的答案，我会检查这个选项，因为现在不可能更新项目版本。