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

、コンポーネントは、データから来ている見当がつかないなければなりません。しかし、あなたの場合、あなたはおそらく@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の一部を削除するようなものを上書きします。

次にあなたがこの

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

ようなあなたの FruitCmpでコンポーネントを使用することができます

Answer 2

再利用可能なコンポーネントに@Inputを設定します。次に、親コンポーネントから値を取得するコンポーネントビューセレクタに属性を設定します。その値にJSONファイル名を含める必要があります。

Answer 3

あなたがデータに入力プロパティを作成し、親コンポーネントから値を渡すことができます：あなたのBananaCmpが本当に再利用可能にするために

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

// component.ts 
@Input() data;