考虑完全简单的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中的跟踪吗？
澄清：我知道我可以使用我创建并为自己推动的可观察量.我要问的是,是否有任何已经融入框架的方式(这不需要我为可观察的文本编写大量的样板),只是在服务和组件之间建立一个可变轨道.
使用行为可以使用Observable而不需要太多样板.
@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){};
}
