Javascript 如何将数据嵌套到子级>；儿童>；子组件？

我有一个结构：

• 根分量
• • 钮扣
• • • （菜单搜索组件）-一个简单的输入字段
• • 小部件
• • • （小部件组件）
• • • • （猫小部件）-在这里显示我在菜单搜索中输入的内容

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

我是否必须从菜单搜索调用事件发射器并将数据传递到按钮，然后再执行“完成小部件>小部件子项>cats组件”以显示

如果是，我如何更正并传递数据？特别是如何向下传递数据

我目前所做的是使用@Output将数据从cat传递到widgets，从widgets传递到root应用

从我做过的儿童事件中通过

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

@Output（）inputData:EventEmitter=neweventemitter（）；
自定义功能（事件）{
this.inputData.emit（事件）；
}

而不是在父对象上捕获事件

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

---

直到我到达根组件。

angular guide提供了一系列关于处理各种组件到组件数据交互场景的技巧，如下面的场景

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

---

我还不明白服务是如何传递数据的，因为我认为服务只是一个要执行的脚本块，但不能实际存储数据。我见过ViewChild，例如，当您将祖父母的数据传递给child时，您会使用它。另外，Angular文档对我来说很难阅读，因为它写得很复杂，感觉好像缺少了位要了解完整的概念，使用服务，您是否可以在加载所有内容后将数据从祖父母传递给孩子？还是仅在启动构造函数以预先设置数据时？