Angular2父子组件数据传递之@ViewChild获取子组件详解

@ViewChild的作用是声明对子组件元素的实例引用，意思是通过注入的方式将子组件注入到@ViewChild容器中，你可以想象成依赖注入的方式注入，只不过@ViewChild不能在构造器constructor中注入，因为@ViewChild会在ngAfterViewInit()回调函数之前执行。

@VIewChild提供了一个参数来选择将要引入的组件元素，可以是一个子组件实例引用，也可以是一个字符串(两者的区别，后面会讲)

//子组件实例引用
@ViewChild(ChildrenComponent) child:ChildrenComponent; //字符串
@ViewChild("child") child2;

下面我们来介绍一下两种用法。

1、当传入的是一个子组件实例引用

children.component.ts

import { Component} from "@angular/core";@Component({selector:'app-children',templateUrl: './children.component.html',styleUrls: ['./children.component.less']
})
export class ChildrenComponent{fun1(){alert('子组件方法');}
}

parent.component.ts

import { Component} from "@angular/core";@Component({selector:'app-parent',templateUrl: './parent.component.html',styleUrls: ['./parent.component.less']
})
export class ParentComponent{@ViewChild(ChildrenComponent) child:ChildrenComponent;onClick(){this.child.fun1();}
}

1、这里传入一个子组件实例引入，定义了一个变量child接收

2、定义了Onclick()方法，用于页面触发点击事件，模拟调用子组件中的方法

parent.component.html

  <div class="parent_div"><p>父组件</p><div><input type="button" value="调用子组件方法" (click)="onClick()"></div><!-- 子组件指令 --><app-children></app-children></div>

父组件模版中input绑定了一个click点击事件，页面触发点击调用onClick()方法

2.当传入的是一个字符串

parent.component.ts

 import { Component} from "@angular/core";@Component({selector:'app-parent',templateUrl: './parent.component.html',styleUrls: ['./parent.component.less']
})
export class ParentComponent{@ViewChild('myChild') child;onClick(){this.child.fun1();}
}

1、@ViewChild传入一个字符串myChild，变量child接收。其它不变

parent.component.html

    <div class="parent_div"><p>父组件</p><div><input type="button" value="调用子组件方法" (click)="onClick()"></div><!-- 子组件指令 --><app-children #myChild></app-children></div>

两种效果是一样的。

转载于:https://www.cnblogs.com/zhumeiming/p/10339113.html

Angular2父子组件数据传递之@ViewChild获取子组件详解相关推荐

【微信小程序】组件间通信与事件-获取子组件的实例对象
1.0 前言 1.1 为何写这篇笔记小程序官方文档只粗略给了一段代码,让笔者找不到北,故记录下易于理解的过程,以便新手了解和使用 1.2 获取子组件实例对象的作用当引用了组件,且父组件使用了监听函 ...
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...
angular使用@viewChild父组件获取子组件的数据和方法
一. 父组件通过局部变量获取子组件的引用 ,主动获取子组件的数据和方法 1. 使用#给子组件命名为#footer <app-footer #footer></app-footer ...
vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
vue --- 获取子组件数据的一个应急方案$refs
使用$refs需要注意以下2点: 1.html方法使用子组件时,需使用ref = "xxx" 声明. 2.在父组件中使用,this.refs.xxx.msg 获取数据 <!D ...
组件、局部的组件、表行组件、组件数据传递
组件:基础的基础知识点组件(Component,Portlet) 组件组件就是页面上的一小块区域内容,完成一个小的页面功能,请参照视频第六课. 综合例 <div id="myAp ...
vue 同页面不同组件数据传递
不用 vuex 同页面不同组件数据传递,用vuex的这篇文章可以忽略! 直接举例: 一个页面有两个组件,其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递 ...
vue3 中通过$refs 获取子组件数据
vue2 中获取子组件中的数据方法,可以使用 this.$refs ,但此方式在vue3中不适用了. 问题: 点击删除行的同时修改表格中数据选中状态,需要通过 ref 操作表格中的数据. 具体代码如下 ...

Angular2父子组件数据传递之@ViewChild获取子组件详解

Angular2父子组件数据传递之@ViewChild获取子组件详解相关推荐

最新文章

热门文章