Angular 父子组件声明与访问

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容