Angular2の入力としてサービスを渡す

Question

私のすべてのリストに必要ないくつかの機能を含む汎用リストコンポーネントを作成したいと思います。理想的には、異なるデータセットをレンダリングするために、コンポーネントへの入力としてさまざまなサービスを使用したいと考えています。これは角度2で可能ですか？サービスは約束を返しgetItems()という名前のいくつかの機能を有していればこれが可能である場合は、角2つのドキュメント

@Component({ 
    selector: 'Generic List', 
    template: 
    ` 
    <h2>Items</h2> 
    <ul class="items"> 
     <li *ngFor="let item of items" 
      [class.selected]="isSelected(item)" 
      (click)="onSelect(item)"> 
     <span class="badge">{{item.id}}</span> {{item.name}} 
     </li> 
    </ul> 
    ` 
}) 
export class GTComponent { 
    @Input() someService: Service; 

    items: Item[]; 
    private selectedId: number; 

    isSelected(item: Item) { return item.id === this.selectedId; } 

    onSelect(item: Item) { 
    } 
} 

から例をModfying

は、どのように私は、サービスからのデータを持つアイテムの配列を移入します。

Answer 1

基本的に、Angular2コンポーネントにインポートしたサービスについて伝える必要があります。 providers配列を@Componentデコレータに渡すことでそうすることができます。

このコードの例を見て：

import {ListService} from '../services/list.service'; 

@Component({ 
    selector: 'Generic List', 
    template: 
    ` 
    <h2>Items</h2> 
    <ul class="items"> 
     <li *ngFor="let item of items" 
      [class.selected]="isSelected(item)" 
      (click)="onSelect(item)"> 
     <span class="badge">{{item.id}}</span> {{item.name}} 
     </li> 
    </ul> 
    `; 
    providers: [ListService] 
}) 
export class GTComponent { 
    constructor(private _listService = ListService){ 
     this._listService.getItems() 
      .then() 
      .catch() 
    } 
    @Input() someService: Service; 

    items: Item[]; 
    private selectedId: number; 

    isSelected(item: Item) { return item.id === this.selectedId; } 

    onSelect(item: Item) { 
    } 
}