Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output詳解(下)
前言
之前已經(jīng)給大家介紹了Angular 2父子組件數(shù)據(jù)傳遞之@Input和@Output的相關(guān)內(nèi)容，下面這篇文章我們?cè)龠M(jìn)一步的進(jìn)行介紹：
子組件向父組件傳遞數(shù)據(jù)使用事件傳遞是子組件向父組件傳遞數(shù)據(jù)最常用的方式，子組件需要實(shí)例化EventEmitter類(lèi)來(lái)訂閱和觸發(fā)自定義事件
第一步定義子組件
childenComponent.ts
(1).實(shí)例化EventEmitter，賦值給event，event被@Output裝飾器定義為輸出屬性，這樣event具備了向上級(jí)傳遞數(shù)據(jù)的能力，通過(guò)調(diào)用EventEmitter類(lèi)中定義的emit方法，來(lái)向上傳遞數(shù)據(jù)
(2).定義一個(gè)name屬性，用于接受子組件頁(yè)面的輸入
(3).定義upward方法，用于子組件頁(yè)面點(diǎn)擊事件 觸發(fā)事件調(diào)用，upward()方法里面調(diào)用自定義事件event來(lái)觸發(fā)emit方法 傳遞數(shù)據(jù)
childenComponent.html
第二步定義父組件
parentComponent.ts
parentComponent.html
父組件通過(guò)綁定自定義事件event ,來(lái)訂閱來(lái)自子組件觸發(fā)事件（這里是點(diǎn)擊事件），當(dāng)我們點(diǎn)擊子組件上面的按鈕，調(diào)用子組件的upward()方法,內(nèi)部實(shí)現(xiàn)會(huì)調(diào)用this.event.emit(this.name);傳遞數(shù)據(jù)，自此父組件就能夠監(jiān)聽(tīng)自定義事件event。調(diào)用getData來(lái)接收傳遞過(guò)來(lái)的數(shù)據(jù)
最終效果:表單輸入數(shù)據(jù)，點(diǎn)擊頁(yè)面按鈕，數(shù)據(jù)傳遞到父組件，在顯示出來(lái)
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- 詳解Angular 4.x 動(dòng)態(tài)創(chuàng)建組件
- Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
- Angular2學(xué)習(xí)教程之組件中的DOM操作詳解
- angular中不同的組件間傳值與通信的方法
- Angular父組件調(diào)用子組件的方法
- Angular5給組件本身的標(biāo)簽添加樣式class的方法
- Angular入口組件（entry component）與聲明式組件的區(qū)別詳解
- angular2倒計(jì)時(shí)組件使用詳解
- 詳解angular2封裝material2對(duì)話框組件
- 簡(jiǎn)單談?wù)凙ngular中的獨(dú)立組件的使用
相關(guān)文章
淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容
本篇文章主要介紹了淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
AngularJs 利用百度地圖API 定位當(dāng)前位置 獲取地址信息
本文主要介紹了AngularJs 利用百度地圖API 定位當(dāng)前位置 獲取地址信息的方法步驟。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
AngularJS 購(gòu)物車(chē)全選/取消全選功能的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇AngularJS 購(gòu)物車(chē)全選/取消全選功能的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
這篇文章主要介紹了AngularJS使用ngMessages進(jìn)行表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-12-12
Angular4集成ng2-file-upload的上傳組件
本篇文章主要介紹了Angular4集成ng2-file-upload的上傳組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
spy?是一種檢查函數(shù)是否被調(diào)用或提供自定義返回值的方法,我們可以使用spy?來(lái)測(cè)試依賴(lài)于服務(wù)的組件,并避免實(shí)際調(diào)用服務(wù)的方法來(lái)獲取值,在本文中,您將學(xué)習(xí)如何在?Angular?項(xiàng)目中使用?Jasmine?spy,需要的朋友可以參考下2024-03-03
angular 組件通信的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了angular 組件通信的幾種實(shí)現(xiàn)方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
基于Angularjs實(shí)現(xiàn)分頁(yè)功能
這篇文章主要介紹了基于Angularjs實(shí)現(xiàn)分頁(yè)功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例
本篇文章主要介紹了Angular實(shí)現(xiàn)預(yù)加載延遲模塊的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
AngularJS中的Module類(lèi)負(fù)責(zé)定義應(yīng)用如何啟動(dòng)，它還可以通過(guò)聲明的方式定義應(yīng)用中的各個(gè)片段。我們來(lái)看看它是如何實(shí)現(xiàn)這些功能的2015-12-12