如何做Angular2主和细节部件之间间的通信？ [英] How to do inter communication between a master and detail component in Angular2?

问题描述

有一个主详细例如在angular2现场。我不能按照下面的示例所示的模式。

在我的例子，我有三个组件（1）customershome（2）客户和（3）为CustomerDetails 。在 customershome 撰写的客户（主）和为CustomerDetails （详细信息）。在客户组件，我可以选择客户和客户的详细信息应显示在为CustomerDetails 部分。

我怎样才能做到从客户组件到为CustomerDetails组件单向的沟通？

 ＆LT; D​​IV的风格=显示：弯曲;＆GT;
    ＆LT; D​​IV的风格=WIDTH：25vw＆GT;
        ＆LT;客户＆GT;＆LT; /客户＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV的风格=WIDTH：75vw;保证金：5像素＆GT;
        ＆LT;为CustomerDetails＆GT;＆LT; /为CustomerDetails＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

下面是一个使用一个父一个简单的应用程序＆LT;客户浏览器＆GT; 与组件＆LT;客户列表＆gt; 和＆LT;客户的细节方式＆gt; 子

<一个href=\"http://plnkr.co/edit/aEjlwIKKhcErWAnIhY3C?p=$p$pview\">http://plnkr.co/edit/aEjlwIKKhcErWAnIhY3C?p=$p$pview

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

该列表组件接受同样的名单，并公开了选择属性，并发出的 selectedChange 的输出事件。这个语法允许双向绑定，而绑定了父母的 selectedCustomer 的属性。

细节成分只是将其绑定到的客户的输入母公司的 selectedCustomer 的属性。

There is a master-detail example on the angular2 site. I can't follow the pattern in my example below.

In my example I have three components (1) customershome (2) customers and (3) customerdetails. The customershome compose customers (master) and customerdetails (details). In the customers component, I can select a customer and the details of the customer should be displayed in the customerdetails component.

How can I do the one-way communication from the customers component to the customerdetails component?

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

解决方案

Here's a simple app that uses a parent <customer-browser> component with <customer-list> and <customer-detail> subcomponents.

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

The browser itself simply accepts an array of customers as an input, and has an internal selectedCustomer property.

The list component accepts the same list, and exposes a "selected" property, and emits a selectedChange output event. This syntax allows two way binding, and that gets bound to the parent's selectedCustomer property.

The detail component simply takes an customer input which is bound to the parent's selectedCustomer property.

这篇关于如何做Angular2主和细节部件之间间的通信？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！