Angular2父子组件数据传递之@ViewChild获取子组件详解
@ViewChild的作用是聲明對(duì)子組件元素的實(shí)例引用，意思是通過(guò)注入的方式將子組件注入到@ViewChild容器中，你可以想象成依賴注入的方式注入，只不過(guò)@ViewChild不能在構(gòu)造器constructor中注入，因?yàn)?#64;ViewChild會(huì)在ngAfterViewInit()回調(diào)函數(shù)之前執(zhí)行。
@VIewChild提供了一個(gè)參數(shù)來(lái)選擇將要引入的組件元素，可以是一個(gè)子組件實(shí)例引用， 也可以是一個(gè)字符串(兩者的區(qū)別，后面會(huì)講)
//子組件實(shí)例引用 @ViewChild(ChildrenComponent) child:ChildrenComponent; //字符串 @ViewChild("child") child2;下面我們來(lái)介紹一下兩種用法。
1、當(dāng)傳入的是一個(gè)子組件實(shí)例引用
?
? ?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、這里傳入一個(gè)子組件實(shí)例引入，定義了一個(gè)變量child接收
2、定義了Onclick()方法，用于頁(yè)面觸發(fā)點(diǎn)擊事件，模擬調(diào)用子組件中的方法
parent.component.html
<div class="parent_div"><p>父組件</p><div><input type="button" value="調(diào)用子組件方法" (click)="onClick()"></div><!-- 子組件指令 --><app-children></app-children></div>父組件模版中input綁定了一個(gè)click點(diǎn)擊事件，頁(yè)面觸發(fā)點(diǎn)擊調(diào)用onClick()方法
?
?
2.當(dāng)傳入的是一個(gè)字符串
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傳入一個(gè)字符串myChild，變量child接收。其它不變
parent.component.html
<div class="parent_div"><p>父組件</p><div><input type="button" value="調(diào)用子組件方法" (click)="onClick()"></div><!-- 子組件指令 --><app-children #myChild></app-children></div>兩種效果是一樣的。
?
轉(zhuǎn)載于:https://www.cnblogs.com/zhumeiming/p/10339113.html
總結(jié)
以上是生活随笔為你收集整理的Angular2父子组件数据传递之@ViewChild获取子组件详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
