Maison > interface Web > js tutoriel > Un exemple de la façon de transmettre des valeurs entre les composants dans angulairejs2

Un exemple de la façon de transmettre des valeurs entre les composants dans angulairejs2

零下一度
Libérer: 2017-05-16 10:15:56
original
2299 Les gens l'ont consulté

La méthode officielle d'AngualrJs2 consiste à utiliser @Input, @Output pour réaliser un transfert de valeur mutuel entre les composants, et il doit y avoir une relation parent-enfant entre les composants. Voici une méthode simple pour vous. réaliser le transfert entre les composants. La valeur, non seulement les composants parent-enfant, les composants inter-modules peuvent également réaliser la transmission de valeur

/**
 *1.定义一个服务,作为传递参数的媒介
 */
@Injectable()
export class PrepService{

  //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法    
  profileInfo: any;
  
  }
Copier après la connexion
 /**
 *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;
  }
 }
Copier après la connexion
  /**
 *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;
  }
 }
Copier après la connexion

Idée : définir un service comme support pour transmettre des paramètres. et injectez-le dans le composant à passer. Dans le constructeur, puis attribuez et obtenez des valeurs aux attributs (support de transfert de paramètres) dans le service pour implémenter le transfert de paramètres entre composants

La démo ci-dessus vous donne juste une idée simple, vous pouvez l'utiliser librement

【Recommandations associées】

1 Recommandation spéciale : Télécharger la version. V0.1 de "php Programmer Toolbox"

2 Tutoriel vidéo en ligne js gratuit<.>

3.

php .cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal