首页 文章

@HostListener在我正在侦听外部点击时导致更改检测触发次数太多

提问于
浏览 次
6

我有下一个根组件模板，它绘制了9个tile：

<ul>
  <li *ngFor="let x of [0,1,2,3,4,5,6,7,8]">
    <tile></tile>
  </li>
</ul>

和下一个tile组件，我在其中添加了HostListener以进行文档点击：

import {AfterViewChecked, Component, HostListener} from '@angular/core';

@Component({
  selector: 'tile',
  template: '<p>tile works!</p>'
})
export class TileComponent implements AfterViewChecked {

  ngAfterViewChecked(): void {
    console.log('checked');
  }

  @HostListener('document:click', ['$event'])
  onOutsideClick(event: any): void {
      // do nothing ...
  }

}

Plunker：http://plnkr.co/edit/7wvon25LhXkHQiMcwh48?p=preview

当我运行这个时，我看到每次点击更改检测被称为9 ^ 2次：
enter image description here

我不明白为什么 .

有人可以向我解释为什么在这种情况下变化检测触发n ^ 2次？

angular angular2-changedetection

1 回答

  • 2

    简短回答 - 这是设计的 .

    由于我们有一个单击处理程序，因此角度触发器会在调用处理程

    因此，当第一个组件处理单击时，它会导致更改检测 . 然后所有组件打印“检查” .

    对于每个组件重复这一点，所以我已经“检查了9 ^ 2个打印件” .

    还有一点需要注意，OnPush策略无助于减少打印量 .

    回复于

相关问题