优化ngAfterViewChecked的设计模式

Question

我试图通过querySelectorAll方法获取角分量的DOM元素，如下所示：

const widgetHTMLElements: NodeListOf<ChildNode> = document.querySelectorAll('medium-editor')[0].childNodes[0].childNodes

我的第一反应是把它放在ngAfterViewInit方法中，但是我很快就意识到DOM还没有准备好，我知道这一点，因为我已经显示了一些console.log，我得到了以下内容：

​

​

有趣的是，返回的NodeList有一个长度为0的，但包含了一些元素，我起初认为这只是Chrome控制台的不一致，但是一旦我试图遍历对象，我会注意到它不工作，所以我想知道这是怎么回事……

无论如何，我认为它可能必须做生命周期挂钩，并且选择了ngAfterViewChecked，好消息是它工作得很好，我可以遍历返回的NodeList，console.log展示了一些更有趣的东西：

​

​

显然，存在一个迭代，其中DOM的旧状态很普遍，然后第一个更改允许querySelectorAll返回所需的对象。

问题是ngAfterViewChecked将无限期地执行，所以我想我可能会建立一些布尔标志，一旦querySelectorAll的长度改变或其他什么，它就会设置为true；我只是不希望ngAfterViewChecked在页面大部分空闲的时候继续使用资源，但我也不想错过重大的更改。

我的问题是是否存在某种设计模式来限制ngAfterViewChecked的性能问题，如果是，它是什么样的？

Answer 1

理想情况下，应该在调用ngAfterViewInit方法之后填充DOM。我不确定，您关注的DOM是否是基于async API调用填充的。

ngAfterViewChecked背后的原因是在默认更改检测器完成组件视图的更改检查之后调用的。与其使用document.querySelectorAll，我建议您使用ViewChildren。

// I'm assuming below `menu-editor` is component selector
@ViewChildren('medium-editor') mediumEditors: QueryList<MenuEditorComponent>;

ngAfterViewInit() {
   this.mediumEditors.changes.subscribe((mediumEditors) => {
      console.log('mediumEditors', mediumEditors);
      // use nativeElement property of each item to access DOM
      mediumEditors.forEach(i => console.log(i.nativeElement));
   });
}

在这里，您可以以角度的方式监视menuEditors DOM元素。menu-editor元素添加/删除中的任何更改都将在change订阅中发出。