代码之家 › 专栏 › 技术社区 › ilMattion

我如何从孩子到祖父进行沟通?

typescript angular

1

ilMattion · 技术社区 · 8 年前

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

SearchComponent:该组件调用web服务并将结果注入SearchResultComponent。
SearchResultComponent:这个组件在一个表中公开我的数据。
EditComponent:该组件允许编辑我的数据。

搜索组件 代码:

<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>

低于我的 编辑组件 代码:

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

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

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

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

我怎样才能达到目标?

谢谢

1 回复 | 直到 8 年前

1

Andresson 8 年前

至少有两种方法可以做到这一点。
1、选项: 创建一个类似于@AsifKarimBherani建议的单例服务。

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

在Angular 2+的简单用例中,您可以通过提供服务来实现这样的结果只有在应用程序中。单元输电系统( 如果使用Angular CLI中的标准文件/文件夹结构 ).

2、选项: 使用 @输出 室内装修设计师

子组件公开一个EventEmitter属性,该属性用于当某事发生时发出事件。父项绑定到该事件属性并对这些事件作出反应。

用@输出装饰装饰

希望这能给你一些想法。