小编Art*_*tem的帖子

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

我最近看到了 Google I/O'17 https://www.youtube.com/watch?v=aCMbSyngXB4的视频，在 11:30 - 11:40 演示者进行了一些点击，然后在每个视频之后自动突出显示 dom 元素更改为漂亮的绿色边框和背景。

有人知道一些 chrome 插件、工具或代码片段可以帮助我为我的 Angular2 应用程序做同样的事情吗？适合整个应用程序一次（而不是向每个组件添加一些东西）

我希望这是出于性能优化的目的，以便用我的眼睛轻松捕获不必要的 DOM 更改。例如，由于某些被遗忘的不纯管道，可能会发生这种情况。