Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的示例分析

這篇文章主要為大家展示了“Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的示例分析”這篇文章吧。

淡描@ViewChild

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

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

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

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

childenConponetn.ts

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

parentComponent.ts

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

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

parentComponetn.html

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

最終效果如下：

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

parentComponent.ts

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

parentComponent.html

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

以上是“Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！