如何等待DOM渲染

Question

在进入下一个函数之前，我必须等待DOM渲染。以下是流程/生命周期:

1. Push into Array:

this.someFormArray.push((this.createForm({
name: 'Name'
type: type,
})))

2. 触发尝试从步骤3访问HTML的函数

this.onSizeChange();

3. HTML呈现:

<ng-container *ngFor="let item of someFormArray.controls">
<img[src]="someUrl">
</ng-container>

问题来了，HTML渲染应该是第2步。但这不是Angular生命周期的工作方式，为了解决这个问题，我包装了第2步。设置为SetTimeout，在DOM渲染后自然触发:

setTimeout(() => {
this.onSizeChange();
}, 0);

虽然这工作，我感兴趣的是有什么更好的方法来处理这个，或者这是好的?

注意:整个流程是在用户更改/点击时触发的，而不是onInit, afterviewit等。

Answer 1

使用AfterViewInit生命周期钩子，它将在正确渲染后调用父函数。

将步骤#2放入afterViewInit生命周期钩子中

https://angular.io/api/core/AfterViewInit