Angular2父组件类调用子组件方法

本地变量

若只需要在父组件的模板中调用子组件方法,可以给子组件添加一个本地变量名,在模板中使用该名称调用。

父组件模板增加子组件的本地变量名(#name)和调用

调用子组件方法

ViewChild和ViewChildren

用上面的别名方法,只能在父组件的模板中调用,而不能在父组件类中访问子组件,有些局限。

如果需要在父组件类中访问或调用子组件方法,需要使用ViewChild、ViewChildren将子组件注入到父组件中。

父组件模板:

通过本地变量调用子组件方法通过ViewChild调用子组件方法

父组件类:

exportclassAppComponentimplementsAfterViewInit{ 

 title="首页"; 

 title2="首页2"; 

 name="姓名111";// 获取模板内的第一个指定组件

@ViewChild(HeaderComponent)

privateheader1:HeaderComponent;

// 如果有多个相同的标签,可以用本地变量名来选择

@ViewChild('header2')

privateheader2:HeaderComponent;

// 也可以用ViewChildren 获取所有同类型子组件

@ViewChildren(HeaderComponent)

privateheaders: QueryList;  ngAfterViewInit() {

    console.log(this.header1.isChecked); 

   console.log(this.header2.isChecked);

this.headers.forEach((child) => { console.log(child.title) }); 

 } 

 onCheckedChange(isChecked:boolean) {  

  console.log("checkbox选中状态:"+isChecked); 

 } 

 headerToggle() {

this.header1.toggle(); 

     }

}

注入的属性只有在ngAfterViewInit后才能使用,这也好理解,只有显示了以后,才能注入嘛。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,993评论 19 139
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,854评论 2 17
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,573评论 25 708
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,779评论 18 399
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,110评论 1 10