Angular 角度绑定属性在ViewChild方法调用期间不可用
我有一个Angular2视图,它在视图加载期间调用子组件上的方法来初始化它。子组件绑定到父组件上的属性,我希望在方法调用期间访问该属性;但是,由于某些原因,直到调用完成后才会填充它。说明了这个问题Angular 角度绑定属性在ViewChild方法调用期间不可用,angular,binding,viewchild,Angular,Binding,Viewchild,我有一个Angular2视图,它在视图加载期间调用子组件上的方法来初始化它。子组件绑定到父组件上的属性,我希望在方法调用期间访问该属性;但是,由于某些原因,直到调用完成后才会填充它。说明了这个问题 export class ParentComponent implements OnInit { @ViewChild('child') child: ChildComponent; message: string; ngOnInit() { this.message =
export class ParentComponent implements OnInit {
@ViewChild('child')
child: ChildComponent;
message: string;
ngOnInit() {
this.message = "Set by parent";
this.child.onParentInvoke();
}
}
export class ChildComponent implements OnInit {
@Input()
message: string;
callProperty: string;
onParentInvoke() {
//I want the message property to be populated here
this.callProperty = this.message;
}
ngOnInit() {
}
}
父模板:
<div>This is parent</div>
<div>Message: {{message}}</div>
<child #child [message]="message"></child>
<div>This is child</div>
<div>Message during method call: {{callProperty}}</div>
<div>Message: {{message}}</div>
这是家长
消息:{{Message}}
子模板:
<div>This is parent</div>
<div>Message: {{message}}</div>
<child #child [message]="message"></child>
<div>This is child</div>
<div>Message during method call: {{callProperty}}</div>
<div>Message: {{message}}</div>
这是孩子
方法调用期间的消息:{{callProperty}
消息:{{Message}}
有人能告诉我为什么在这个阶段不绑定属性,以及我能做些什么来确保在方法调用期间填充属性?编辑:Paul Taylor评论后的解决方案:
export class ParentComponent implements OnInit {
@ViewChild('child')
child: ChildComponent;
message: string;
constructor(
private ref: ChangeDetectorRef,
) { }
ngOnInit() {
this.message = "Set by parent";
this.ref.detectChanges();
this.child.onParentInvoke();
}
}
谢谢,但这并不能解决问题(我确实将detectChanges()调用放在缓存绑定属性值的行之前)。。。难道这与组件中缺少构造函数有关吗?发现如果我在调用
this.child.onParentInvoke()
之前将ChangeDetectorRef放在父组件中并调用detectChanges(),它就会工作。如果你更新了这篇文章,我会给你评分。为了清楚起见,删除对ChildComponent的最初建议怎么样?