在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属性的客户输入。