javascript - 如何在 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>