2016-04-14 27 views
7

È necessario accedere all'elemento figlio proprietà. Parent :proprietà componente figlio 2 angolare accesso dal componente principale

<div> 
    <shipment-detail #myCarousel ></shipment-detail> 
</div> 
@Component({ 
    selector: "testProject", 
    templateUrl: "app/partials/Main.html", 
    directives: [ShipmentDetail] }) 
class AppComponent { 
    getChildrenProperty() { 
    // I want to get access to "shipment" 
    } 
} 

Bambini:

@Component({ 
    selector: "shipment-detail", 
}) 
export class ShipmentDetail { 
    shipment: Shipment; 
} 

risposta

15

Vedere le Component Interaction cookbook. Quindi, usa @ViewChild() e aggiungi un metodo a ShipmentDetail che il genitore può chiamare per recuperare il valore della spedizione, o semplicemente accedere direttamente alla proprietà, come mostro di seguito (perché ero pigro e non volevo scrivere un'API/metodo):

@Component({ 
    selector: "testProject", 
    templateUrl: "app/partials/Main.html", 
    directives: [ShipmentDetail] 
}) 
export class AppComponent { 
    @ViewChild(ShipmentDetail) shipmentDetail:ShipmentDetail; 
    ngAfterViewInit() { 
     this.getChildProperty(); 
    } 
    getChildProperty() { 
    console.log(this.shipmentDetail.shipment); 
    } 
} 

Plunker

+0

Grande, Grazie per la soluzione ... una punta (per i principianti come me) come ho affrontata ... l'accesso alla proprietà dentro 'constructor' darà un errore di runtime, quindi 'ngAfterViewInit()' non è una scelta casuale. –

+1

Nelle direttive RC6 è deprecato, quindi è sufficiente rimuovere le direttive: [ShipmentDetails] –

+2

Sembra che ci sia una domanda interessante, come potrebbe essere fatto in questa settimana. – peterh

Problemi correlati