Question

我有一个Angular2视图，它调用子组件上的方法以在视图加载期间初始化它。子组件绑定到我想在方法调用期间访问的父项上的属性;但是，出于某种原因，直到通话结束后才会填充。 This plunker证明了这个问题。

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>

有人可以告诉我为什么在这个阶段没有绑定属性，以及我可以做些什么来确保在方法调用期间填充它？

Answer 1

编辑：保罗·泰勒评论后的解决方案：

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();
  }
}

在ViewChild方法调用期间不可用的角度绑定属性

1 个答案: