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

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

  •  1
  • ilMattion  · 技术社区  · 7 年前

    我正在用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 回复  |  直到 7 年前
        1
  •  1
  •   Andresson    7 年前

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

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

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

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

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

    用@输出装饰装饰

    希望这能给你一些想法。