Question

我正在使用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>

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

我如何达到目标？

由于

Answer 1

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

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

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

<强> 2。选项：使用 @Output 装饰器创建从孙子到父级的桥梁以及从父级到祖父级的另一个桥梁。

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

子级的EventEmitter属性通常是输出属性   装饰有@Output装饰

希望这给了你一些想法。

我怎样才能从孩子到祖父的组成部分进行交流？

1 个答案: