angular – 防止触发更改检测的本机浏览器事件(如滚动)

发布时间：2020-12-17 07:34:44 所属栏目：安全来源：网络整理

导读：我正在绑定一个滚动事件来捕获滚动并用它做一些事情,我已经创建了一个像bellow一样的指令：所以我有简单的指令,除了： constructor ( private el : ElementRef,private renderer : Renderer ) { this.domAdapter = new browser.BrowserDomAdapter(); this.r

我正在绑定一个滚动事件来捕获滚动并用它做一些事情,我已经创建了一个像bellow一样的指令：

所以我有简单的指令,除了：

constructor ( private el : ElementRef,private renderer : Renderer ) {
              this.domAdapter = new browser.BrowserDomAdapter();
              this.ruler      = new Ruler( this.domAdapter );
      }
      ngAfterViewInit () : any {
              this.renderer.listenGlobal( 'window','scroll',()=> {
                  console.log( 'scrolling' );
              } );
              return undefined;
      }

这工作正常,期望我可以看到它在我的所有应用程序中触发滚动更改检测.

这是我的一个组件内部：

private  aFunction () {
             console.log( 'change detected !!!' );
     }

我在某个组件中的某个模板中有一个函数：

<div>{{ aFunction() }}</div>

以前,只有当我更新了一些输入或点击了一个按钮时,aFunction才会被解雇,但是现在,它正在滚动变换检测！
因此,我的滚动体验是滞后的！

这是Angular2的正常行为,所有事件都应该触发更改检测,但我想从此规则中排除我的滚动事件.

简而言之,如何在Angular2中定义一个事件,并将其转换为触发变更检测并使其成为手动的能力.

我在找：

this.renderer.listenGlobalButDontFireTheChangeDetection

我可以为你提供几个黑客：

1)只需在组件的OnPush上设置检测策略：

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})

相应的plunkr在这里是http://plnkr.co/edit/NPHQqEmldC1z2BHFCh7C?p=preview

2)将zone.runOutsideAngular与本机window.addEventListener一起使用：

this.zone.runOutsideAngular(() => {
  window.addEventListener('scroll',(e)=> {
    console.log( 'scrolling' );
  });
});

另见plunkr http://plnkr.co/edit/6Db1AIsTEGAirP1xM4Fy

3)使用zone.runOutsideAngular和EventManager的新实例,如下所示：

import { DomEventsPlugin,EventManager } from '@angular/platform-browser';
...
this.zone.runOutsideAngular(() => {
   const manager = new EventManager([new DomEventsPlugin()],new NgZone({enableLongStackTrace: false}));
   manager.addGlobalEventListener('window',(e) => {
     console.log( 'scrolling' ); 
   });
});

plunkr在这里http://plnkr.co/edit/jXBlM4fONKSNc7LtjChE?p=preview

我不确定这是正确的做法.也许它可以帮助你推进…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!