快捷導(dǎo)航

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

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

AngualrJs2官方方法是以@Input,@Output來實(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 {
 //定義參來接收來自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ù)里面屬性（傳參媒介）來賦值和取值實(shí)現(xiàn)組件之間的傳參。

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

您可能感興趣的文章: