angularjs2 不同組件間的通信


AngualrJs2官方方法是以@Input,@Output來實現組件間的相互傳值,而且組件之間必須父子關系,下面給大家提供一個簡單的方法,實現組件間的傳值,不僅僅是父子組件,跨模塊的組件也可以實現傳值

/**
 *1.定義一個服務,作為傳遞參數的媒介
 */
@Injectable()
export class PrepService{

  //定義一個屬性,作為組件之間的傳遞參數,也可以是一個對象或方法    
  profileInfo: any;
  
  }
 /**
 *2.傳遞參數的組件,我這邊簡單演示,直接就在構造器里面實現傳參了
 */ 
@Component({
  selector: 'XXXXXXX',
  templateUrl:"./XXXXXX.html",
  styleUrls:["./XXXXXXX.css"]
})

export class ReportComponent {

  //定義要傳遞的參數(此處是一個對象,也可以是方法)        
  reponsePrep:any ={
    name : "臘肉豆皮",
    address:"中歐五花肉"
  }

  //構造器注入PrepService服務    
  constructor(private ps:PrepService){
    //把當前組件參數賦值給PrepService的profileInfo屬性
    ps.profileInfo = this.reponsePrep;
  }
 }
  /**
 *3.接受參數的組件
 */ 
@Component({
  selector: 'YYYYYY',
  templateUrl:"./YYYYYYYY.html",
  styleUrls:["./YYYYYYY.css"]
})

export class commandComponent {

  //定義參來接收來自PrepService服務profileInfo屬性的值
  requestPrep:any; 

  //構造器注入PrepService服務    
  constructor(private ps:PrepService){
    //把PrepService的profileInfo屬性的值賦值給requestPrep實現組件的之間的傳值
    this.requestPrep = ps.profileInfo;
  }
 }

思路:定義一個服務作為傳遞參數的媒介注入在要傳參的組件的構造器里面,然后對服務里面屬性(傳參媒介)來賦值和取值實現組件之間的傳參

以上demo只是給一個簡單的思路給大家,大家可以自由發揮

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM