角度：AfterViewInit() 與 AfterContentInit()

Question

我試圖確切了解導致AfterViewInit()和AfterContentInit()生命周期掛鈎觸發的原因。

從官方角度文檔它說AfterViewInit()

創建組件的子視圖后的 Angular 調用

它說AfterContentInit()

Angular 將外部內容投影到組件中后的 Angular 調用

這兩種說法在我看來已經幾乎無法區分了。 兒童視圖與外部內容不一樣嗎？

舉個例子： parent.component.html

<div class="parent">
  <child-comp></child-comp>
</div>

其中child-comp是包含大量標記並依賴於異步數據的子組件。

在parent.component.ts 中，我想等到子組件完全呈現后再調用AfterViewInit()或AfterContentInit() 。 當我運行這段代碼它發生的確切順序角度說，將AfterContentInit()被稱為第一之后AfterViewInit() 目前 child-comp 沒有接收到大量數據，但最終它可能會並且需要更長的時間來呈現（數據一旦上線就會增長）。

我現在擔心的是，因為我的數據有限，加載時間太快，通過選擇一個生命周期鈎子而不是另一個我可能會不情願地陷入競爭狀態 - 一旦數據增加和加載時間減速，這種情況就會失敗。

Answer 1

如果您已經開始在 Angular 中進行一些動態組件加載或手動創建視圖，這將變得更有意義。

當組件的@Input s 和@Output s 被解析后， OnInit被調用一次。

AfterViewInit在組件的視圖被附加AfterViewInit調用。 請記住，Angular 將所有視圖編譯為 JS 文件，而不是 html - 框架管理代碼中的模板，並具有與 DOM 交互的渲染引擎。 除了實際渲染組件之外，Angular 還需要遞歸地構建和管理與組件綁定及其生命周期相關的子/父關系。 子組件也需要解析它們的綁定並與它們的父組件經歷相同的渲染生命周期。 簡單地說，在這個鈎子上@ViewChild和@ViewChildren將被解析——子組件將被完全初始化，它們的屬性將可用。

AfterContentInit 。 當組件的子視圖和外部內容已附加時調用。 這來自內容投影，通常在<ng-content>標簽中。 這是渲染器需要沿着樹向下執行的另一個步驟，在將其附加到脫節視圖之前解析所有投影內容。 如果你不亂用模板或<ng-content>你真的不需要擔心它。 這里@ContentChild和@ContentChildren將被解析。

至於您提到的競爭條件，如果您使用正確的生命周期鈎子來滿足需要，則無需擔心——它們只是在@Input s、 @ViewChildren和@ContentChildren上設置后立即調用的鈎子組件——注入屬性的競爭條件不應該通過控制反轉來改變檢測（非框架因素不存在）:)