An example of how to pass values ​​between components in angularjs2

The official method of AngualrJs2 is to use @Input, @Output to realize mutual value transfer, and the components must have a parent-child relationship. Here is a simple method to realize the transfer between components. Value, not only parent-child components, cross-module components can also realize value passing

/**
 *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;
  }
 }

Idea: Define a service as a medium for passing parameters and inject it into the constructor of the component to be passed, and then add it to the service Attributes (parameter transfer medium) are used to assign and obtain values ​​to implement parameter transfer between components

The above demo is just to give you a simple idea, you can use it freely

[Related recommendations]

1. Special recommendation: "php Programmer Toolbox" V0.1 version download

2 . Free js online video tutorial

##3.

php.cn Dugu Jiujian (3) －JavaScript video tutorial

The above is the detailed content of An example of how to pass values ​​between components in angularjs2. For more information, please follow other related articles on the PHP Chinese website!