Ein Beispiel für die Übertragung von Werten zwischen Komponenten in AngularJS2

Die offizielle Methode von AngualrJs2 besteht darin, @Input und @Output zu verwenden, um einen gegenseitigen Werttransfer zwischen Komponenten zu realisieren, und es muss eine Eltern-Kind-Beziehung zwischen Komponenten bestehen. Hier ist eine einfache Methode für Sie Realisieren Sie die Übertragung zwischen Komponenten. Nicht nur übergeordnete und untergeordnete Komponenten, sondern auch modulübergreifende Komponenten können die Wertübergabe realisieren

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

Idee: Definieren Sie einen Dienst als Medium für die Übergabe von Parametern und injizieren Sie es in die zu übergebende Komponente. Weisen Sie dann den Attributen (Parameterübertragungsmedium) im Dienst Werte zu und erhalten Sie diese, um die Parameterübertragung zwischen Komponenten zu implementieren.

Die obige Demo zeigt Ihnen nur Eine einfache Idee, Sie können sie frei verwenden

【Verwandte Empfehlungen】

1 Besondere Empfehlung: Download-Version V0.1 von „php Programmer Toolbox“

2. Kostenloses js-Online-Video-Tutorial

3. php .cn Dugu Jiujian (3) - JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonEin Beispiel für die Übertragung von Werten zwischen Komponenten in AngularJS2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!