快捷導(dǎo)航

Angularjs2不同組件間的通信實(shí)例代碼

更新時(shí)間：2017年05月06日 07:48:25 作者：德川hlkawa

AngualrJs2官方方法是以@Input,@Output來(lái)實(shí)現(xiàn)組件間的相互傳值，而且組件之間必須父子關(guān)系，下面給大家提供一個(gè)簡(jiǎn)單的方法，實(shí)現(xiàn)組件間的傳值，不僅僅是父子組件，跨模塊的組件也可以實(shí)現(xiàn)傳值

/**
 *1.定義一個(gè)服務(wù)，作為傳遞參數(shù)的媒介
 */
@Injectable()
export class PrepService{
 //定義一個(gè)屬性，作為組件之間的傳遞參數(shù)，也可以是一個(gè)對(duì)象或方法  
 profileInfo: any;
 }
 /**
 *2.傳遞參數(shù)的組件，我這邊簡(jiǎn)單演示，直接就在構(gòu)造器里面實(shí)現(xiàn)傳參了
 */ 
@Component({
 selector: 'XXXXXXX',
 templateUrl:"./XXXXXX.html",
 styleUrls:["./XXXXXXX.css"]
})
export class ReportComponent {
 //定義要傳遞的參數(shù)(此處是一個(gè)對(duì)象，也可以是方法)    
 reponsePrep:any ={
  name : "臘肉豆皮",
  address："中歐五花肉"
 }
 //構(gòu)造器注入PrepService服務(wù)  
 constructor(private ps:PrepService){
  //把當(dāng)前組件參數(shù)賦值給PrepService的profileInfo屬性
  ps.profileInfo = this.reponsePrep;
 }
 }
 /**
 *3.接受參數(shù)的組件
 */ 
@Component({
 selector: 'YYYYYY',
 templateUrl:"./YYYYYYYY.html",
 styleUrls:["./YYYYYYY.css"]
})
export class commandComponent {
 //定義參來(lái)接收來(lái)自PrepService服務(wù)profileInfo屬性的值
 requestPrep:any; 
 //構(gòu)造器注入PrepService服務(wù)  
 constructor(private ps:PrepService){
  //把PrepService的profileInfo屬性的值賦值給requestPrep實(shí)現(xiàn)組件的之間的傳值
  this.requestPrep = ps.profileInfo;
 }
 }

思路：定義一個(gè)服務(wù)作為傳遞參數(shù)的媒介注入在要傳參的組件的構(gòu)造器里面，然后對(duì)服務(wù)里面屬性（傳參媒介）來(lái)賦值和取值實(shí)現(xiàn)組件之間的傳參。

以上所述是小編給大家介紹的Angularjs2不同組件間的通信實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

詳解Angular-cli生成組件修改css成less或sass的實(shí)例
這篇文章主要介紹了詳解Angular-cli生成組件修改css成less或sass的實(shí)例的相關(guān)資料,這里主要講解修改angular-cli.json文件,生成css或者less,需要的朋友可以參考下
2017-07-07
AngularJS實(shí)現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)進(jìn)度條功能,結(jié)合具體完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)進(jìn)度條功能的原理、相關(guān)知識(shí)點(diǎn)與注意事項(xiàng),需要的朋友可以參考下
2017-07-07
AngularJS 實(shí)現(xiàn)購(gòu)物車全選反選功能
這篇文章主要介紹了AngularJS 實(shí)現(xiàn)購(gòu)物車全選反選功能,需要的朋友可以參考下
2017-10-10
Angular2里獲取（input file）上傳文件的內(nèi)容的方法
這篇文章主要介紹了Angular2里獲?。╥nput file）上傳文件的內(nèi)容的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
Angular刷新當(dāng)前頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了Angular刷新當(dāng)前頁(yè)面的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
angularJs關(guān)于指令的一些冷門屬性詳解
下面小編就為大家?guī)?lái)一篇angularJs關(guān)于指令的一些冷門屬性詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解
這篇文章主要介紹了AngularJS雙向綁定和依賴反轉(zhuǎn)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-04-04
AngularJs 利用百度地圖API 定位當(dāng)前位置獲取地址信息
本文主要介紹了AngularJs 利用百度地圖API 定位當(dāng)前位置獲取地址信息的方法步驟。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了angular4自定義組件非input元素實(shí)現(xiàn)ngModel雙向數(shù)據(jù)綁定的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Angular?項(xiàng)目實(shí)現(xiàn)國(guó)際化的方法
本篇文章主要介紹了Angular?項(xiàng)目實(shí)現(xiàn)國(guó)際化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧<BR>
2018-01-01