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

Question

我有下一个根组件模板，可以绘制9个图块：

<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

简短回答 - 这是设计上的。

由于我们有一个点击处理程序，角度触发器会在调用处理程序后更改检测。

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

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

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

Answer 2

@Hostlistener可能很昂贵。在这里检查我的答案，以最大程度地减少影响并提高性能。 Detect click outside Angular component