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

Question

我有下一个根组件模板,它绘制了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次:

我不明白为什么.

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

Answer 1

简短的回答 - 这是设计使然。

由于我们有一个单击处理程序，因此在调用处理程序后 angular 会触发更改检测。

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

并且对每个组件重复此操作，因此我“检查”了 9^2 个打印件。

另外要注意的是，OnPush 策略无助于减少打印量。