分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了HostListener减慢了应用程序：Angular2，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

但这会减慢我的应用程序速度,而不是以非常重要的方式,但页面上的滚动不再平滑.也许是因为hostlistner一直在寻找要滚动的页面,因此订阅会使整个滚动体验变得迟钝.我尝试删除hostListner,滚动再次平滑.有人注意到这种行为吗？如果没有,使用Angular2在页面上订阅滚动事件的最佳方法是什么？

解决方法

您可以在角度区域外运行此功能,以防止冗余的更改检测周期.

为此,我将覆盖EventManager以将侦听器保持在区域外.

自定义事件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,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?