Я пишу приложение углового2, которое имеет два компонента. Оба компонента берут данные из одной службы. Я включил эту службу в два из моего Компонента, и я хочу, когда когда-либо будет какое-либо изменение данных в любом Компоненте, это должно изменить представление другого компонента, поскольку оба получат дату от той же услуги, и эти данные изменения компонентов в сервисах.Отдельный экземпляр класса обслуживания в угловом2 Модуль/приложение
начальной загрузки приложения
//main.ts
platformBrowserDynamic().bootstrapModule(AppModule);
App Код модуля:
//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 класс, при условии, что и обеспечивает в компонентах
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();
}
}
Что я делаю неправильно?
Позвольте мне попробовать. Спасибо за быстрый ответ. –
Это сработало. благодаря –