Question

angular2网站上有一个master-detail示例。我无法按照下面的例子中的模式进行操作。

在我的示例中，我有三个组件（1）customershome（2）customer和（3）customerdetails 。 customershome 撰写客户（主要）和 customerdetails （详情）。在客户组件中，我可以选择客户，客户的详细信息应显示在 customerdetails 组件中。

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

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

Answer 1

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

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

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

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

详细信息组件只接受 customer 输入，该输入绑定到父 selectedCustomer 属性。

Answer 2

试试这个 -

@Component({
  selector: 'child',
  inputs: ['model'],
  template: `<h3>child</h3> 
    <div>{{model.prop1}}</div>
    <div>{{model.prop2}}<div>`
})
class Child {

}


@Component({
  selector: 'my-app',
  directives: [Child],
  template: `
  <h3>Parent</h3>
  <button (click)="updateModel()">update model</button>
  <child [model]="parentModel"></child>
  `
})
class App {
  parentModel = { prop1: '1st prop', prop2: '2nd prop' };
  constructor() {}
  updateModel() { this.parentModel.prop1 += ' more'; }
}

如何在Angular2中的主组件和详细信息组件之间进行相互通信？

2 个答案: