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只是給一個簡單的思路給大家，大家可以自由發揮

【相關推薦】

1. 特別推薦：「php程式設計師工具箱」V0.1版本下載

2 . 免費js線上影片教學

#3. php.cn獨孤九賤（3） －JavaScript影片教學

#

以上是angularjs2實作元件間傳值的實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！