如何将数据嵌套到子＆gt;子＆gt;子组件？

Question

我有一个结构：

• 根组件
• • 按钮
• • • （菜单搜索组件） - 一个简单的输入字段
• • 窗口小部件
• • • （小部件组件）
• • • • （Cats小部件） - 显示我在菜单搜索中输入的内容。

如何将菜单搜索组件中的数据传递给窗口小部件组件？ 用户在输入字段中插入数据，我想在窗口小部件字段中显示。

我是否必须从菜单搜索中调用事件发射器并将数据传递给按钮，而不是完成小部件＆gt; Widget Child＆gt;猫组件要显示？

如果是这样，我如何更正传递数据？ Espciall如何向下传递数据？

我目前所做的是使用@Output将数据从cat传递到小部件，从小部件传递到root应用程序。

从我做过的儿童活动开始

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

比父母抓住事件

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

直到我到达Root组件。

Answer 1

角度指南有一堆尖端，可以处理各种组件到组件之间的数据交互场景。

基本选项是在中间组件之间链接属性和输出绑定，使用依赖注入和ViewChild装饰器来“跳转”视图层次结构并从较低级别（依赖注入）获取“更高级别”组件的实例反之亦然（ViewChild），或者使用服务来传递数据（由于与视图层次结构的耦合较少，可能是更多种情况下的最佳选择）。

See the angular docs for more info.