otro - pasar parametros entre componentes angular 4

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

Question

Hay un ejemplo 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 clienteshome componen los clientes (maestro) y los detalles del cliente (detalles). En el componente de clientes , puedo seleccionar un cliente y los detalles del cliente deben mostrarse en el componente de detalles del cliente .

¿Cómo puedo hacer la comunicación unidireccional desde el componente de clientes al componente de detalles del cliente?

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

Answer 1

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

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

El navegador en sí mismo simplemente acepta una matriz de clientes como entrada y tiene una propiedad interna de Cliente seleccionado .

El componente de la lista acepta la misma lista y expone una propiedad "seleccionada", y emite un evento de salida SelectChange. Esta sintaxis permite el enlace bidireccional, y eso se enlaza con la propiedad de cliente seleccionada de los padres.

El componente de detalle simplemente toma una entrada del cliente que está vinculada a la propiedad selectedCustomer del padre.

Answer 2

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''; }
}