Angular 父子组件声明与访问

2018-11-23  本文已影响0人  柳源居士

父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。

  1. 如果父组件要访问子组件的属性或者方法,可以通过设置模板变量来实现。
    如下:
template:`
<button (click)="child.start()"></button>
<app-child #child></app-child>
`

父组件引用了子组件<app-child>,并在子组件上声明了模板变量#child,可以通过#child访问子组件的属性及方法。本例点击按钮,调用了子组件的start()方法。
模板变量有局限性,即只能通过父组件的模板来调用子组件的属性或者方法。
当父组件的类要调用时,此方式就无法完成了。

  1. 父组件的类调用子组件。
    当父组件的类要调用时,把子组件作为ViewChild,注入到父组件中。
@ViewChild(ChildComponent)
private child:  ChildComponent;

doSomthing(){
  this.child.start();
}

上一篇下一篇

猜你喜欢

热点阅读