angular 2子组件没有得到输入数据

时间:2018-02-06 08:48:36

标签: angular eventemitter

在我的情况下,我试图发出一个事件,其中包含来自父母的一个孩子的数据到同一父母的另一个孩子。基本上是兄弟姐妹之间。

代码看起来像

儿童A

 @Output() makeIsrCall = new EventEmitter<LeadModel>()
 startCall(){
    this.makeIsrCall.emit(this.lead)
}

父 html的

    <app-isr-call-toolbar *ngIf="core.isrCallInProgress == true" [data]="isrContact"></app-isr-call-toolbar>
 <app-edit-opty-workarea  [objId]="tb.id" [objType]="tb.objectType" (makeIsrCall)="makeCall($event)"></app-edit-opty-workarea>

.TS

 isrContact:any
 makeCall(lead:LeadModel){
    this.isrContact = lead
  }

儿童B .ts

@Input() data:any
 constructor(private core:CoreStructureService) { 
    console.log('called construct for isr component')

    alert(this.data) //this comes undefined
  }

2 个答案:

答案 0 :(得分:3)

在数据到达之前,构造函数已完成

使用ngOnChanges生命周期回调

@Input() data:any

constructor(private core:CoreStructureService) { 
    console.log('called construct for isr component')
}

ngOnChanges() {
    alert(this.data) //this comes undefined
}

或使data成为二传手

@Input() set data(value:any) {
    this._data = value;
    alert(this._data) //this comes undefined
}

constructor(private core:CoreStructureService) { 
    console.log('called construct for isr component')
}

答案 1 :(得分:0)

你的代码看起来很好,但是代替构造函数尝试获取值为ngOnInit或ngOnChanges。

e.g。

ngOnChanges(changes:SimpleChanges) {
    console.log( changes );
}

这有效!!