Home > Web Front-end > JS Tutorial > An example of how to pass values ​​between components in angularjs2

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

零下一度
Release: 2017-05-16 10:15:56
Original
2298 people have browsed it

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template