angular2のサービスクラスの単一インスタンスModule/app

Question

私は2つのコンポーネントを持つangular2アプリケーションを書いています。どちらのコンポーネントも、1つのサービスからデータを取得します。私はこのサービスを私のコンポーネントの2つに含めました。コンポーネントにデータが変更されたときに、同じサービスの日付が取得され、これらのコンポーネントがサービスのデータを変更するので、他のコンポーネントビューも変更する必要があります。

ブートストラップアプリケーション

//main.ts 
platformBrowserDynamic().bootstrapModule(AppModule); 

アプリモジュールコード：

//app.module.ts 
@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ AppComponent, OfferFilter, OfferListing], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

アプリ成分

//app.component.ts 
@Component({ 
    selector: 'app', 
    template: `<first-component></first-component> 
    <second-component></second-component>`, 
}) 
export class AppComponent { 
} 

第一成分

@Component({ 
    selector: 'first-component', 
    template: ` 
     <div class="manage"> 
      ... 
     </div> 
    `, 
    providers: [WidgetResourcesList] 

}) 
export class OfferFilter { 

    constructor(public widgetResourcesList: WidgetResourcesList) { 
    } 
    selectFilter($event: any) { 
     this.widgetResourcesList.serUserSelection(value, checked); 
    } 

} 

私が間違っているのは何の部品

export class WidgetResourcesList { 

    //noinspection TypeScriptUnresolvedVariable 
    private widgetResources = window.widgetResources; 
    private userSelection: Array<any> = []; 
    private header: Array<any>; 
    private offerList: Array<any>; 

    setOffer(header: Array<any>, offerList: Array<any>) { 
     this.header = header==null? [] : header; 
     this.offerList = offerList==null? [] : offerList; 
    } 

    getOffer() { 
     return {'header': this.header, 'offerList': this.offerList}; 
    } 

    private filterList : Array<any> = [ 
     { 
      'id': 'VIDEO', 
      'name': 'Television', 
      'desc': 'Cable TV and On Demand', 
      'checked': false 
     }, 
     { 
      'id': 'XHS', 
      'name': 'Home', 
      'desc': 'Security, control and more', 
      'checked': false 
     }, 
    ]; 

    getFilterList() { 
     return this.filterList; 
    } 

    serUserSelection(id: String, checked: boolean) { 
     if(checked) { 
      this.userSelection.push(id); 
     } else { 
      if(this.userSelection.indexOf(id) >=0){ 
       this.userSelection.splice(this.userSelection.indexOf(id),1); 
      } 
     } 
    } 

    getOffersForPhone() { 
     let userSelectionStr = this.userSelection.sort().join('$'); 
     if(userSelectionStr==="") { 
      userSelectionStr = "VIDEO" 
     } 
     return this.getOffer(); 
    } 
} 

に提供として提供

第二成分

@Component({ 
    selector: 'second-component', 
    template: ` 
    <table> 
    .... 
    </table> 
    `, 
    providers: [WidgetResourcesList] 
}) 
export class OfferListing { 
    constructor(public widgetResourcesList: WidgetResourcesList) { 
    } 
} 

WidgetResourcesListクラス？

Answer 1

モジュール内のプロバイダにWidgetResourcesListを追加する必要があります。 コンポーネント内のプロバイダから削除する必要があります。あなたがコンポーネントの提供者にサービスを追加すると

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ AppComponent, OfferFilter, OfferListing], 
    bootstrap: [ AppComponent ], 
    providers: [ WidgetResourcesList ] 
}) 
export class AppModule { } 

そのコンポーネントはプロバイダのすべてをインスタンス化されるたびにもインスタンス化されますので、サービスの異なるインスタンスを取得します。