如何等待 DOM 渲染

Question

在進入下一個功能之前，我必須等待 DOM 呈現。 這是流程/生命周期：

1. 推入數組：

    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、AfterViewInit 等。

Answer 1

使用 AfterViewInit 生命周期掛鈎，它會在正確呈現后調用父函數。

將步驟 #2 放在 afterViewInit 生命周期掛鈎中。

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