如何將數據嵌套到child> child> child組件？

Question

我具有這樣的結構：

• 根組件
• • 按鈕
• • • （菜單搜索組件） - 一個簡單的輸入字段
• • 小部件
• • • （插件成分）
• • • • （貓小部件） - 顯示我在菜單搜索放在這裏。

我如何通過從菜單中搜索組件的數據窗口小部件組成？ 用戶在輸入字段中插入數據，我想在小部件字段中顯示。

我是否必須從菜單搜索中調用事件發射器並將數據傳遞給按鈕，而不是去完成小部件> Widget Child> cats組件以顯示？

如果是這樣，我該如何糾正傳遞數據？特別是我如何向下傳遞數據？

我目前所做的是使用@Output將數據從貓傳遞到小部件，從小部件到根應用程序。

要從孩子的事件經過我做

@Output() inputData: EventEmitter<string> = new EventEmitter<string>(); 
customFunction(event){ 
    this.inputData.emit(event); 
} 

比父趕上事件

<cats (inputData)="colorChange($event)"></cats> 

，直到我達到根組件。

Answer 1

角度指南有一堆圍繞處理各種組件到組件數據交互場景的技巧。基本選項是鏈接中間組件之間的屬性和輸出綁定，使用依賴注入和ViewChild裝飾器來'跳轉'視圖層次結構，並從較低層次（依賴注入）抓取「更高層次」組件的實例或反之亦然（ViewChild），或者使用服務傳遞數據（由於耦合到視圖層次結構較少，可能是更多不同情況下的最佳選擇）。

See the angular docs for more info.