在動態組件中將數據從子級傳遞給父級

Question

我一直在關注 Angular 中關於動態組件的教程，並且有一個有效的解決方案，但我似乎無法找到如何將數據從子節點傳遞給父節點。

在這個實時示例（ StackBlitz ）中，我希望能夠單擊子組件（ AdBannerComponent HeroProfileComponent中接收它。

我怎樣才能做到這一點，這是反模式的標志嗎？

Answer 1

您可以做的是添加另一個輸入 - 一個 function - 可以通過孩子點擊調用 - 類似於您在 stackblitz 示例中傳遞data值的方式。

(<AdComponent>componentRef.instance).data = adItem.data;
// similarly
(<AdComponent>componentRef.instance).clickEvent = this.clicked;

clicked($event) {
   console.log('Parent', $event)
}

然后在 AdComponent 中：

@Input() data;
@Input() clickEvent: Function;

onClick() {
  this.clickEvent(this.data)
}

這將調用父級中的 clicked 方法並允許您將數據傳遞給父級

堆棧閃電戰

Answer 2

我認為如果您使用事件發射器，您應該解決您的問題，我附上一張可以給您一個想法的圖片