快捷導(dǎo)航

Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解

更新時(shí)間：2017年07月04日 11:19:52 作者：小處成就大事

這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。

前言

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

淡描@ViewChild

@ViewChild的作用是聲明對(duì)子組件元素的實(shí)例引用，意思是通過注入的方式將子組件注入到@ViewChild容器中，你可以想象成依賴注入的方式注入，只不過@ViewChild不能在構(gòu)造器constructor中注入，因?yàn)锧ViewChild會(huì)在ngAfterViewInit()回調(diào)函數(shù)之前執(zhí)行。

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

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

1、當(dāng)傳入的是一個(gè)子組件實(shí)例引用

childenConponetn.ts

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

parentComponent.ts

1、這里傳入一個(gè)子組件實(shí)例引入，定義了一個(gè)變量child接收

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

parentComponetn.html

1、父組件模版中input綁定了一個(gè)click點(diǎn)擊事件，頁面觸發(fā)點(diǎn)擊調(diào)用OnClick()方法

最終效果如下：

2、當(dāng)傳入的是一個(gè)字符串

parentComponent.ts

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

parentComponent.html

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

最終效果跟上面結(jié)果一樣

總結(jié)

關(guān)于@ViewChild還有很多東西可說，這里我不做多說，我會(huì)在以后的文章中，單獨(dú)寫一遍來講，感興趣的朋友們請繼續(xù)關(guān)注腳本之家。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: