HostListener 减慢应用程序：Angular2

Question

我有一个 hostListner 监听 Angular2 应用程序中的滚动事件。我用它来检查用户是否在页面底部滚动并在用户到达页面底部时执行一个方法。我通过以下方式构建了 hostlistner：

  @HostListener('window:scroll', [])
  onWindowScroll() {
   const scrolledPercent = /* some logic to calculate the percentage scrolled */
  if ( condition1 && condition2 .... )
    { 
     // doing something here
    }
  }

但这会减慢我的应用程序的速度，不是很明显，但页面上的滚动不再流畅。可能是因为 hostlistner 一直在寻找要滚动的页面，所以订阅使整个滚动体验变得迟缓。我尝试删除 hostListner 并且滚动再次平滑。有没有人注意到这种行为？如果没有，使用 Angular2 在页面上订阅滚动事件的最佳方式是什么？

Answer 1

您可以在角度区域之外运行此功能，以防止冗余的变化检测循环。

为此，我将覆盖 EventManager 以将侦听器保持在区域之外。

custom-event-manager.ts

import { Injectable, Inject, NgZone  } from '@angular/core';
import { EVENT_MANAGER_PLUGINS, EventManager } from '@angular/platform-browser';

@Injectable()
export class CustomEventManager extends EventManager {
  constructor(@Inject(EVENT_MANAGER_PLUGINS) plugins: any[], private zone: NgZone) {
    super(plugins, zone); 
  }    

  addGlobalEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
    if(eventName.endsWith('out-zone')) {
      eventName = eventName.split('.')[0];
      return this.zone.runOutsideAngular(() => 
          super.addGlobalEventListener(element, eventName, handler));
    } 

    return super.addGlobalEventListener(element, eventName, handler);
  }
}

app.module.ts

  ...
  providers: [
    { provide: EventManager, useClass: CustomEventManager }
  ]
})
export class AppModule {}

并且只能通过调用changeDetector.detectChanges来更新视图

@HostListener('window:scroll.out-zone', []) // notice out-zone
onWindowScroll() {
  const scrolledPercent = /* some logic to calculate the percentage scrolled   */
  if ( condition1 && condition2 .... ) { 
      this.cd.detectChanges();
  }
}

Plunker Example

另见

• Angular 2 how to keep event from triggering digest loop?