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

前端之家收集整理的这篇文章主要介绍了如何在Angular2中的主和细节组件之间进行互通?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在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属性的客户输入。

猜你在找的Angularjs相关文章