如何在不同的組件中調用方法

Question

如何使用 ViewChild 調用不同組件中的方法？

我在餅圖組件中創建了一個方法，並嘗試從應用程序組件 usinf ViewChild 訪問該方法。

這是我的 piechart.component.ts

export class PiechartComponent {
  constructor() { }
  pie(){
console.log("Hello World")
}
}

這是我的 app.component.ts

export class AppComponent {
 @ViewChild(PiechartComponent) piechart:PiechartComponent;
 constructor(){ }
 pieChart(){ 
 this.piechart.pie();
}
}

這是我的 app.component.html

<button (click)="pieChart()">Pie Chart</button>

當我點擊一個按鈕時，我應該得到輸出為“Hello world”。 但我收到以下錯誤。 “類型錯誤：無法讀取未定義的屬性‘餅’”

Answer 1

您需要在父組件模板中添加子組件

<pie-chart ></pie-chart>
<button (click)="pieChart()">Pie Chart</button>