在 DOM 中呈现元素时通知：Angular 4答案

【问题标题】：Notify when an element is rendered in the DOM: Angular 4在 DOM 中呈现元素时通知：Angular 4
【发布时间】：2019-12-06 18:19:06
【问题描述】：

我的模板中有一个 div，其中包含一堆信息，但由于信息是通过 API 调用动态填充的，因此我在 div 上有一个 *ngIf 条件：

<div class="user-information" *ngIf="userInfoLoaded">
  <div [id]="userInfoObj.id">
     ........
  </div>
</div>

我正在尝试使用 id=userInfoObj.id 获取嵌套的 div 以对其进行处理，但我面临的问题是我不知道 API 何时返回响应，所以类似于：

ngAfterViewInit(): void {
  console.log(document.getElementById(this.userInfoObj.id));
}

不会起作用，因为在我们得到实际响应之前它不会在 DOM 中呈现。那么他们是一种让组件知道这个特定 div 何时在 DOM 中呈现的方法吗？有人建议我使用 Promise，但我不确定在这种情况下会如何工作。

【问题讨论】：

可能有比您尝试使用的解决方案更好的解决方案。但要知道这一点，您需要准确地告诉我们您所说的“用它做某事”是什么意思。你想达到什么目标？
@JBNizet 我将使用 scrollintoview 函数使用 Angular 片段将页面滚动到该 div
好的。那么最好的方法可能是使用 ViewChildren。见angular.io/api/core/ViewChildren。您为您的 div 命名（而不是 ID）：<div #userInfo>。然后你在你的组件中使用@ViewChildren('userInfo')，订阅QueryList的变化，当div出现在视图中时，你就做你想做的事。
有效@JBNizet。但我唯一担心的是，如果您这样做，那么当您在该页面上时，订阅将被执行。我通过在订阅正文中编写控制台日志验证了这一点，并且每当我与该页面的 UI 交互（与该 div 无关）时，都会调用订阅。那么我应该在收到数据后在订阅正文中取消订阅，以便它只执行一次吗？
因为 toPromise() 等待 observable 完成，并发出最后一个事件。您可以使用 first() 或 take(1)。

标签： angular

【解决方案1】：

您可以尝试 AfterContentChecked，它会在每次 dom 更改时触发

【讨论】：