angular2 模块/应用程序中服务的单个实例 class

Question

我正在编写具有两个组件的 angular2 应用程序。这两个组件都从一项服务中获取数据。我已将此服务包含在我的两个组件中，并且我希望每当任何组件中有任何数据更改时，它都应该更改其他组件视图，因为两者都从同一服务获取日期并且这些组件更改服务中的数据。

bootstrap申请

//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);
    }

}

第二部分

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

WidgetResourcesList class 组件中提供的

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();
    }
}

我做错了什么？

Answer 1

您需要将 WidgetResourcesList 添加到模块中的提供者。并且您需要将其从组件中的提供程序中删除。

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

当您向组件的提供者添加服务时，每次实例化该组件时，所有提供者也会被实例化，因此您会获得不同的服务实例。

angular2 模块/应用程序中服务的单个实例 class

Single instance of a service class in angular2 Module / app

angular2-services

angular