Angular проблема производительности с Angular материалом mat-menu

Question

У меня проблема с Angular 4, у меня есть список компонентов, и у каждого из этих компонентов есть мат-меню (Angular компонент материала) внутри. Я получаю много предупреждений в консоли Chrome:

"[Нарушение] Добавлен непассивный прослушиватель событий в событие touchstart, блокирующее прокрутку. Считайте, что обработчик события помечен как" пассивный "для сделать страницу более отзывчивой. "

Я удалил этот компонент, и, как я вижу, количество предупреждений уменьшилось. Кто-нибудь из вас знает, что там происходит? есть ли что-то внутри mat-menu, которое вызывает это предупреждение?

Answer 1

Вы используете Angular 4. Это очень старая версия. Предупреждение о нарушении в chrome является относительно новым, учитывая, сколько лет angular 4. Это означает, что более новые версии angular и библиотека материалов были обновлены для предотвращения этого предупреждения.

Единственный способ избавиться от этого предупреждения - понизить chrome или, наконец, обновить angular (и материал) версия

---

Если вы не можете обновить, вы можете создать плагин менеджера событий . При этом вы можете захватывать события, когда они связаны с элементами. Однако может случиться так, что события в материале не будут связаны таким образом, и сразу же будут связаны, используя либо fromEvent из rx js, либо стандартный 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);
  }
}