Angular 父子组件声明与访问
2018-11-23 本文已影响0人
柳源居士
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。
- 如果父组件要访问子组件的属性或者方法,可以通过设置模板变量来实现。
如下:
template:`
<button (click)="child.start()"></button>
<app-child #child></app-child>
`
父组件引用了子组件<app-child>,并在子组件上声明了模板变量#child,可以通过#child访问子组件的属性及方法。本例点击按钮,调用了子组件的start()方法。
模板变量有局限性,即只能通过父组件的模板来调用子组件的属性或者方法。
当父组件的类要调用时,此方式就无法完成了。
- 父组件的类调用子组件。
当父组件的类要调用时,把子组件作为ViewChild,注入到父组件中。
@ViewChild(ChildComponent)
private child: ChildComponent;
doSomthing(){
this.child.start();
}