從Angular的子組件中調用父組件函數

Question

我想調用我的close()函數，該函數位於Angular的子組件中的父組件中。

這是我在Plunker代碼，我想直接在我的子組件導入組件並調用該函數，但我得到這個錯誤：無法讀取屬性未定義

「關閉」我怎樣才能解決這個問題？

Answer 1

我會盡量給一個完整的答案，這兩種情況下，你可能會遇到：

案例1：從父組件調用子函數

你可以簡單地通過實現這一目標您的子選擇器上的模板變量，用於在您的父組件模板中引用您的子組件，然後可以使用該引用調用任何公共函數或屬性。

所以在你的子組件，你得到了一個功能：

<child-component #childRef></child-component> 
<button (click)="childRef.test()">Call the child test function</button> 

：

test(){ 
console.log(`this is a test`); 
} 

，並在你的父組件，你可以把它在你的父組件比方說，點擊一個按鈕就這樣後

案例2：調用從子組件父功能

這是它給你的使用情況作爲喲情況你可以在子組件中注入父組件並像上面那樣做，但是這個關係不再是父子組件或子父組件，但是這兩個組件都將強連接在一起，這是一種罕見的用例。或者，您可以通過使用@Output裝飾器傳遞數據並在您的孩子中創建將消耗傳入數據的函數，以非常簡單的方式獲得相同的結果。

因此，在您的子組件中，您執行以下操作：

@Output() childEvent = new EventEmitter(); 
test(){ 
this.childEvent.emit('this is a test'); 
} 

在父模板

<child-component (childEvent)="test(message)"></child-component> 

，然後在你的組件

test(msg){ 
console.log(msg); 
}