Angular2'de bir ana bileşen ve detay bileşeni arasında nasıl iletişim kurulur?

Question

Angular2 sitesinde bir master-detail örneği vardır. Aşağıdaki örnekte deseni takip edemiyorum.

Örneğimde, (1) customerhome (2) müşterisi ve (3) customeretails olmak üzere üç bileşene sahibim. customershome, müşterileri (master) ve müşteri bilgilerini (ayrıntıları) oluşturur. müşterileri için ürününde bir müşteri seçebilirim ve müşterinin bilgileri müşteri bilgileri için bileşeninde görüntülenmelidir.

Müşteri bileşeninden müşteri çözümlerinin bileşenine tek yönlü iletişimi nasıl yapabilirim?

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

Answer 1

İşte <customer-list> ve <customer-detail> alt bileşenleri olan bir üst <customer-browser> bileşeni kullanan basit bir uygulamadır.

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

tarayıcının kendisinin sadece bir girdi olarak müşterilerinin bir dizi kabul eder ve bir iç selectedCustomer özelliğine sahiptir.

Liste bileşeni aynı listeyi kabul eder ve bir "selected" özelliği sunar ve selectedChange çıkış olayını yayar. Bu sözdizimi iki yollu bağlama sağlar ve bu, üst öğenin selectedCustomer özelliğine bağlı olur.

detay bileşeni sadece ebeveynin selectedCustomer özelliğine bağlı bir müşteri girdi alır.

Answer 2

bu deneyin -

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