Angular 14 從父組件調用子組件方法

Question

當我嘗試從 Parent 調用 childComponent 方法時出現錯誤

**兒童TS。 **

   export class ChildComponent implements OnInit {
     ChildMethod(){
       console.log('test');
     }
     constructor() { }
   }

**父 T **

   @ViewChild(ChildComponent , {static : false}) child!:ChildComponent ;
  
   CallChild(){
       this.child.ChildMethod();
     }

當我調用 CallChild 時出現此錯誤無法在 GpmainComponent.CallChild (gpmain.component.ts:39:16) 讀取未定義的屬性（讀取“ChildMethod”）

Answer 1

嘗試在構造函數中聲明您的子組件。

在 Parent.ts 中：

constructor(private child: ChildComponent) {}

CallChild() {
  this.child.ChildMethod();
}

Answer 2

這可能取決於您何時調用CallChild 。

如果您在呈現視圖之前調用它，則this.child將是undefined ，從而導致錯誤

Answer 3

這與static: false和時序有關。

當設置為 false 時， ViewChild查詢將在更改檢測運行之后和ngAfterViewInit之前得到解決。 這意味着如果您嘗試在ngOnInit中調用，那么child將是未定義的。

您有 2 個選擇：

• 嘗試稍后調用它，在更改檢測運行之后以及它被初始化時
• 設置static: true如果孩子不在*ngIf下則為 true 然后它將更快地解決並在ngOnInit中可用

Answer 4

感謝您抽出時間回答問題。 我在 ngAfterViewInit 中嘗試了 true 和 false。

在兩個組件都從父組件上的按鈕初始化后，我正在調用子組件。

<button (click)="CallChild()" class="btn btn-link">load Child</button> 

CallChild(){
    this.child.ChildMethod();
  }