考虑完全简单的angular2服务：
import { Injectable } from '@angular/core';
import {Category} from "../models/Category.model";
@Injectable()
export class CategoryService {
activeCategory: Category|{} = {};
constructor() {};
}
然后使用此服务的组件：
import { Component, OnInit } from '@angular/core';
import {CategoryService} from "../shared/services/category.service";
import {Category} from "../shared/models/Category.model";
@Component({
selector: 'my-selector',
template: `
{{categoryService.activeCategory.Name}}<br/>
{{category.Name}}<br/>
`,
})
export class MySelectorComponent implements OnInit {
category:Category|{} = {};
constructor(public categoryService:CategoryService){};
ngOnInit() {
this.category = this.categoryService.activeCategory;
};
}
假设适当定义的类别模型并假设某个地方的另一个组件在某个时刻将服务上的activeCategory设置为有效的类别。假设categoryservice被设置为适当更高级别的提供者。
当发生这种情况时，模板中的第一行将正确显示类别名称，但第二行不会。我尝试过使用getter和setter与原始访问服务;我尝试过原始类型与对象和对象属性;我无法相信第一行是适合此类访问的范例。有人能告诉我将服务属性绑定到组件属性的最简单方法，该属性将正确地改变角度2中的跟踪吗？
澄清：我知道我可以使用我创建并为自己推动的可观察量。我要问的是，是否有任何已经融入框架的方式（这不需要我为可观察的文本编写大量的样板），只是在服务和组件之间建立一个可变轨道。
Observables可以在没有太多样板的情况下使用 Behavior秒。
@Injectable()
export class CategoryService {
activeCategory:BehaviorSubject<{category:Category}> = new BehaviorSubject({category:null});
// or just `Subject` depending on your requirements
}
@Component({
selector: 'my-selector',
template: `
{{(categoryService.activeCategory | async)?.Name}}<br/>
`,
})
export class MySelectorComponent implements OnInit {
constructor(public categoryService:CategoryService){};
}
您也可以绑定到服务的属性
@Component({
selector: 'my-selector',
template: `
{{categoryService?.activeCategory?.Name}}<br/>
`,
})
export class MySelectorComponent implements OnInit {
constructor(public categoryService:CategoryService){};
}
使用Elvis（或安全导航）操作符，如果是，则不会出现错误 activeCategory 仅在稍后获取值，例如异步调用完成时。
你可以尝试替代 ngOnInit() 同 ngDoCheck()。我不确定（实际上我怀疑）这是正确的做法，无论如何你都可以尝试。
这个方法在每个变化检测周期运行（而不是我猜的标准Angular算法，这是潜在的问题）因此你应该有 category 的财产 MySelectorComponent 最新的服务变更。
再次需要注意副作用（我不清楚）。
不是太大的样板块。
但是这里发生的事情是，当创建服务或者你打电话时，你想要处理它。您的组件将通过订阅了解它，然后将您的本地变量更新为新值。允许您以this.activeCategory的身份访问它。
import { Injectable } from '@angular/core';
import {Category} from "../models/Category.model";
import {Subscription} from 'rxjs/Subscription';
@Injectable()
export class CategoryService {
private _categoryObject = new Subject<any>();
categoryObjectAnnounced$ = this._categoryObject;
private _activeCategoryObject = new Subject<any>();
activeCategoryObjectAnnounced$ = this._activeCategoryObject;
activeCategory: Category|{} = {};
constructor() {};
}
import { Component, OnInit } from '@angular/core';
import {CategoryService} from "../shared/services/category.service";
import {Category} from "../shared/models/Category.model";
import {Subscription} from 'rxjs/Subscription';
@Component({
selector: 'my-selector',
template: `
{{activeCategory.Name}}<br/>
{{category.Name}}<br/>
`,
})
export class MySelectorComponent implements OnInit {
category:Category|{} = {};
activeCategory:ActiveCategory|{} = {};
activeCategorySubscription : Subscription;
categorySubscription : Subscription;
constructor(public categoryService:CategoryService){
this.categorySubscription= this.categoryService.categoryObjectAnnounced$.subscribe((category) => {
this.category= category;
});
this.activeCategorySubscription= this.categoryService.activeCategoryObjectAnnounced$.subscribe((active) => {
this.activeCategory= active;
});
};
ngOnInit() {
};
}