Cómo hacer la comunicación entre un componente maestro y detalle en Angular2?

Hay un ejemplo de master-detail en el sitio angular2. No puedo seguir el patrón en mi ejemplo a continuación.

En mi ejemplo tengo tres componentes (1) customershome (2) customers y (3) customerdetails. Los customershome componen customers (master) y customerdetails (details). En el componente customers , puedo seleccionar un cliente y los detalles del cliente deben mostrarse en el customerdetails componente.

¿Cómo puedo hacer la comunicación unidireccional del componente customers al componente customerdetails?

<div style="display: flex;">
    <div style="width:25vw">
        <customers></customers>
    </div>
    <div style="width:75vw; margin:5px">
        <customerdetails></customerdetails>
    </div>
</div>
 25
angular
Author: wonderful world, 2015-11-28
Source

2 answers

Aquí hay una aplicación simple que utiliza un componente padre <customer-browser> con subcomponentes <customer-list> y <customer-detail>.

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

El propio navegador simplemente acepta una matriz de clientes como entrada , y tiene una propiedad interna selectedCustomer.

El componente list acepta la misma lista, y expone una propiedad "selected", y emite un evento de salida selectedChange. Esta sintaxis permite dos vías enlace, y que se vincula a la propiedad del padre selectedCustomer.

El componente detail simplemente toma una entrada customer que está vinculada a la propiedad del padre selectcustomer.

 24
Author: robwormald,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-28 03:44:56

Prueba esto - 

@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'; }
}
 10
Author: Kanchan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-12 02:54:11