如何从子组件到祖父组件进行通信？答案

【问题标题】：How can I comunicate from child to grandfather component?如何从子组件到祖父组件进行通信？
【发布时间】：2018-04-08 02:58:07
【问题描述】：

我正在使用 Angular 2 开发一个应用程序。在我的场景中，有三个组件：

SearchComponent：该组件调用Web服务并将结果注入SearchResultComponent。
SearchResultComponent：这个组件将我的数据暴露在一个表中。
EditComponent：此组件允许编辑我的数据。

以下SearchComponent代码：

<form>
    ... there my form input
</form>

<!-- result is a property inside my SearchComponent class -->
<search-result [(value)]="result"></search-result>

以下SearchResultComponent代码：

<div>
    <table>
        ... there is my table
        ... foreach row I have one edit component
        <tr>
            <td>data</td>
            <td>
                <edit></edit>
            </td>
        </tr>
    </table>
</div>

在我的 EditComponent 代码下方：

<form>
    ... There are edit inputs...
</form>

<button label="Salva" (click)="edit()"></button>

<edit [(documentId)]="id"></edit>

我的目标是当我点击保存按钮时，我会重新加载我的结果。

我怎样才能达到目标？

谢谢

【问题讨论】：

所以问题是，如果您在组件之间没有直接连接，最好使用 Service 来使用服务，您可以从 angular.io/tutorial/toh-pt4 了解它

标签： angular typescript

【解决方案1】：

至少有两种方法可以做到这一点。
1.选项：像@AsifKarimBherani 建议的那样创建一个单例服务。

..单例模式是一种软件设计模式，它将类的实例化限制为一个对象。当需要一个对象来协调整个系统的动作时，这很有用。

在 Angular 2+ 中的简单用例中，您可以通过在 app.module.ts 中提供服务only 来实现这样的结果（如果使用来自 Angular 的标准文件/文件夹结构- CLI）。

2。选项：使用 @Output 装饰器创建从孙子到父母的桥梁和从父母到祖父母的桥梁。

子组件公开一个 EventEmitter 属性当事情发生时发出事件。父级绑定到该事件属性并对这些事件做出反应。

孩子的 EventEmitter 属性是一个输出属性，通常装饰有@Output 装饰

希望这能给你一些想法。

【讨论】：