@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获取子组件详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。