如何在Angular4的組件上顯示不同的JSON數據？

Question

我有一個可重用的組件，該組件從JSON文件中獲取數據。 但是，當此組件在其他組件上用作子組件時，我想顯示不同的數據（來自不同的JSON路徑）。

例如，我有一個Banana成分

@UxComponent({
  selector: "[banana]",
  host: {
    class: "bananaClass"
  }
})

export class BananaCmp extends BaseMolecule {
public name = "Banana";
public description = "Banana is awesome";
public data: any;

public permittedParams: any = {
  // Insert the permitted config parameters (remove this line when done)
};

public ngOnInit () {
  this.jsonService.loadData("BananaData").then(
    (data: any) => this.data = data
  );
}

然后想象我想在Fruits組件內使用Banana組件。

export class FruitsCmp extends BaseMolecule {
public name = "Fruits";
public description = Fruits are healthy!";
public data: any;

public permittedParams = {
  // Insert the permitted config parameters (remove this line when done)
};  

public config = {
  // Insert the default config (remove this line when done)
};

public ngOnInit () {
  // Maybe something like this, but I need to make sure only FruitsData.json is being fetched. Not both BananaData & FruitsData
  // this.jsonService.loadData("FruitsData").then(
  //  (data: any) => this.data = data
  //)
};

如何正確執行此操作？

Answer 1

為了使BananaCmp真正可重用，該組件應該不知道數據來自何處。 但是在您的情況下，您可能只想使用@Input()然后覆蓋默認數據即可，如下所示

export class BananaCmp extends BaseMolecule {
public name = "Banana";
public description = "Banana is awesome";
public data: any;
@Input inputData:any;

public ngOnInit () {
        if(inputData){
          this.data = inputData;
         }else{
         this.jsonService.loadData("BananaData").then(
           (data: any) => this.data = data
        );
   }
//...
}

或者只是完全刪除jsonService部分。

然后，您可以像這樣使用FruitCmp的組件

<banana [inputData]="data"> </banana>

Answer 2

在可重用組件上設置一個@Input 。 然后在該組件視圖選擇器上設置一個屬性，該屬性將從父組件中獲取值。 該值應包含JSON文件名。

Answer 3

您可以將數據作為輸入屬性，並從父組件傳遞值：

// component.html
<div banana [data]="jsonService.loadData('BananaData') |async" />
<div fruits [data]="jsonService.loadData('FruitsData') |async" />

// component.ts
@Input() data;