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