前言

之前在《Angular 2父子組件數據傳遞之局部變量獲取子組件其他成員》講到過（如果有不懂的，可以先去看看），通過在子組件模版上設置局部變量的方式獲取子組件的成員變量，但是有一個限制，必須在父組件的模版中設置局部變量才能夠獲取到子組件成員。那有沒有辦法實現不依賴于局部變量獲取子組件成員呢？ 答案：肯定是有的，接下來我們講下通過@ViewChild來實現！

淡描@ViewChild

@ViewChild的作用是聲明對子組件元素的實例引用，意思是通過注入的方式將子組件注入到@ViewChild容器中，你可以想象成依賴注入的方式注入，只不過@ViewChild不能在構造器constructor中注入，因為@ViewChild會在ngAfterViewInit()回調函數之前執行。

@VIewChild提供了一個參數來選擇將要引入的組件元素，可以是一個子組件實例引用， 也可以是一個字符串(兩者的區別，后面會講)

下面我們來介紹一下兩種用法。

1、當傳入的是一個子組件實例引用

childenConponetn.ts

1、定義了一個類方法fun1() ，提供給父組件調用

parentComponent.ts

1、這里傳入一個子組件實例引入，定義了一個變量child接收

2、定義了Onclick()方法，用于頁面觸發點擊事件，模擬調用子組件中的方法

parentComponetn.html

1、父組件模版中input綁定了一個click點擊事件，頁面觸發點擊調用OnClick()方法

最終效果如下：

2、當傳入的是一個字符串

parentComponent.ts

1、@ViewChild傳入一個字符串myChild，變量child接收。其它不變

parentComponent.html

1、細心的你會發現這里在子組件模版中創建了一個局部變量#myChild，父組件中的myChild字符串解釋為一個選擇器。也就是一個元素包含模版局部變量#myChild，這就是與第一種方式唯一不同的地方，這里彌補了《Angular 2父子組件數據傳遞之局部變量獲取子組件其他成員》只能在模版中使用子組件引入的缺陷

最終效果跟上面結果一樣

總結

關于@ViewChild還有很多東西可說，這里我不做多說，我會在以后的文章中，單獨寫一遍來講，感興趣的朋友們請繼續關注武林網。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。