如何在Angular2中的主和细节组件之间进行互通？

发布时间：2020-12-17 08:08:57 所属栏目：安全来源：网络整理

导读：在angular2站点上有一个 master-detail的例子。我不能按照我的例子中的模式。在我的例子中，我有三个组件(1)客户(2)客户和(3)客户详细信息。客户组成客户(主)和客户详细信息(详细信息)。在客户组件中，我可以选择客户，客户的细节应该显示在customerdetails

在angular2站点上有一个 master-detail的例子。我不能按照我的例子中的模式。

在我的例子中，我有三个组件(1)客户(2)客户和(3)客户详细信息。客户组成客户(主)和客户详细信息(详细信息)。在客户组件中，我可以选择客户，客户的细节应该显示在customerdetails组件中。

如何从客户组件到customerdetails组件进行单向沟通？

<div style="display: flex;">
    <div style="width:25vw">
        <customers></customers>
    </div>
    <div style="width:75vw; margin:5px">
        <customerdetails></customerdetails>
    </div>
</div>

这是一个简单的应用程序，使用父< customer-browser> < customer-list>的组件和< customer-detail>子。

http://plnkr.co/edit/aEjlwIKKhcErWAnIhY3C?p=preview

浏览器本身只是接受一组客户作为输入，并且具有内部的selectedCustomer属性。

列表组件接受相同的列表，并显示“selected”属性，并发出selectedChange输出事件。此语法允许双向绑定，并且绑定到父级的selectedCustomer属性。

详细信息组件只需要一个绑定到父级的selectedCustomer属性的客户输入。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!