Typescript angular 2 从父组件访问子组件属性

发布于04月15日

需要访问属性子元素.

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

children :

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

推荐答案

看Component Interaction cookbook.因此，使用@ViewChild()并向ShipmentDetail添加一个方法，父级可以调用该方法来检索装运值，或者直接访问该属性，如下所示(因为我很懒，不想编写API/方法):

@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