親子組件溝通

Question

下文提到的從父組件更改子組件屬性的方法中哪一種是好的？

任務：

我想在加載父組件時將類'md-show'從父組件添加到彈出模式組件中

@viewchild decorator

要么

document.querySelector()

Answer 1

如果你只有一個component彈出組件內。 您可以在彈出組件內部使用函數ngAfterViewInit 。 很簡單 ：）

Answer 2

比使用@ViewChild更好的方法是：

1. 在您的ChildComponent中定義一個shouldAddClass屬性，並使用@Input裝飾器@Input裝飾。
2. 在ChildComponent模板中使用[ngClass]或[class.md-show]將類添加到HTML元素中，具體取決於shouldAddClass的值
3. 在您的ParentComponent中，創建一個名為wasParentLoaded的屬性，其類型為boolean，並將其初始設置為false 。
4. 在您的ParentComponent模板中，通過屬性綁定語法將綁定wasParentLoaded與ChildComponent的shouldAddClass @Input屬性一起使用。
5. 當父組件被加載時，它將觸發AfterViewInit生命周期掛鈎。 因此，在ParentComponent的ngAfterViewInit內部，您可以簡單地將wasParentLoaded更改為true 。

這應該可以解決問題。

這是供您參考的示例StackBlitz 。

PS：這將在控制台上給您ExpressionChangedAfterItHasBeenCheckedError ，因為我們試圖在Angular執行其更改檢測時更改Component的屬性。 但是僅在開發模式下。