web-dev-qa-db-fra.com

propriété de composant enfant d'accès 2 angulaire à partir du composant parent

Besoin d’accès à l’élément enfants de la propriété . Parent:

<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" 
  }
}

Enfants:

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

Voir le livre de recettes d'interaction entre composants . Donc, utilisez @ViewChild () et ajoutez à ShipmentDetail une méthode que le parent peut appeler pour récupérer la valeur de l'envoi, ou accédez directement à la propriété, comme je le montre ci-dessous (parce que j'étais paresseux et que je ne voulais pas écrire d'API/méthode):

@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

24
Mark Rajcok

Dans la nouvelle version de Angular, nous pouvons accéder aux méthodes ou propriétés enfants en important un composant enfant dans un composant parent:

Composant enfant - shippingdetail.component.ts:

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

app.component.ts:

import { ShipmentDetailComponent}  from './shipmentdetail.component';   
@Component({
  selector: "testProject",
  templateUrl: "app/partials/Main.html"
})
export class AppComponent { 
  @ViewChild(ShipmentDetailComponent) shipmentDetail:ShipmentDetailComponent;
  ngAfterViewInit() {
      this.getChildProperty();
  }
  getChildProperty() {
     console.log(this.shipmentDetail.shipment);
  }
}

Vérifier la documentation: https://angular.io/guide/component-interaction#parent-calls-an-viewchild

1
Komal