Как выполнить межсоединение между основным и детальным компонентом в Angular2?

Существует пример master-detail на сайте angular2. Я не могу следовать шаблону в моем примере ниже.

В моем примере у меня есть три компонента (1) customershome (2) клиентов и (3) клиентские данные. customershome составляют клиенты (мастер) и клиентские данные (подробности). В компоненте клиенты я могу выбрать клиента, а сведения о клиенте должны отображаться в компоненте Customerdetails.

Как я могу сделать одностороннюю связь с компонентом клиентов компоненту customerdetails?

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

Ответ 1

Здесь представлено простое приложение, которое использует родительский компонент <customer-browser> с подкомпонентами <customer-list> и <customer-detail>.

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

Сам браузер просто принимает массив клиентов в качестве ввода и имеет внутреннее свойство selectedCustomer.

Компонент списка принимает тот же список и предоставляет свойство "selected", а также выделяет событие output selected selected. Этот синтаксис допускает двухстороннюю привязку и привязывается к родительскому выбранному свойству Customer.

Компонент детали просто берет вход пользователя, который привязан к родительскому выбранному свойству Customer.

Ответ 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'; }
}