Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
前言
本文主要介紹的是關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)內(nèi)容，話不多說(shuō)，來(lái)看看詳細(xì)介紹：
通過(guò)@Input和@Output可以實(shí)現(xiàn)數(shù)據(jù)之間的傳遞，但是無(wú)法獲取子組件的類(lèi)屬性和類(lèi)方法，接下來(lái)我們通過(guò)局部變量方式實(shí)現(xiàn)獲取子組件其他成員
第一步：定義子組件：
ChildenComponent.ts
(1).子組件中之定義了一個(gè)fun1()方法，提供給父組件調(diào)用
第二步：定義父組件
ParentComponent.ts
ParentComponent.html
通過(guò)#號(hào)來(lái)標(biāo)識(shí)一個(gè)變量, 這樣在父組件模板中創(chuàng)建了一個(gè)局部變量#chiden來(lái)獲取子組件的實(shí)例,調(diào)用子組件中的方法和屬性。上面例子中我們定義了#chiden之后，綁定點(diǎn)擊就可以調(diào)用子組件的方法了
看看效果
點(diǎn)擊按鈕，彈出子組件方法的alert('子組件方法');
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- Angular父子組件通過(guò)服務(wù)傳參的示例方法
- Angular2 父子組件通信方式的示例
- angularjs2中父子組件的數(shù)據(jù)傳遞的實(shí)例代碼
- Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解(下)
- Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解 (上)
- Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
- Angular 2父子組件之間共享服務(wù)通信的實(shí)現(xiàn)
- Angular2 父子組件數(shù)據(jù)通信實(shí)例
- 詳解Angular父子組件通訊
相關(guān)文章
angular2 ng build部署后base文件路徑問(wèn)題詳細(xì)解答
本篇文章主要介紹了angular2 ng build部署后base文件路徑問(wèn)題詳細(xì)解答，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Angular腳手架開(kāi)發(fā)的實(shí)現(xiàn)步驟
這篇文章主要介紹了Angular腳手架開(kāi)發(fā)的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
關(guān)于Angular2 + node接口調(diào)試的解決方案
這篇文章主要給大家介紹了關(guān)于Angular2 + node接口調(diào)試的解決方案，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
這篇文章主要介紹了Angular8 Http攔截器簡(jiǎn)單使用教程，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
理解AngularJs篇：30分鐘快速掌握AngularJs
這篇文章主要介紹了理解AngularJs篇：30分鐘快速掌握AngularJs，詳細(xì)介紹了AngularJs所涉及的知識(shí)點(diǎn)，有興趣的可以了解一下。2016-12-12
詳解關(guān)于Angular4 ng-zorro使用過(guò)程中遇到的問(wèn)題
這篇文章主要介紹了詳解關(guān)于Angular4 ng-zorro使用過(guò)程中遇到的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
本篇文章主要介紹了剖析Angular Component的源碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
angular源碼學(xué)習(xí)第一篇 setupModuleLoader方法
這篇文章主要介紹了angular源碼學(xué)習(xí)第一篇，setupModuleLoader方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10