使用正确的更改跟踪将服务属性绑定到组件属性

Question

考虑完全简单的Angular 2服务:

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

假设适当定义的Category模型并假设某个地方的另一个组件在某个时刻将服务上的activeCategory设置为有效的Category.假设类别服务被设置为适当更高级别的提供者.

当发生这种情况时,模板中的第一行将正确显示类别名称,但第二行不会.我尝试过使用getter和setter与原始访问服务; 我尝试过原始类型与对象和对象属性; 我无法相信第一行是适合此类访问的范例.有人能告诉我将服务属性绑定到组件属性的最简单方法,该属性将正确地改变角度2中的跟踪吗？

澄清:我知道我可以使用我创建并为自己推动的可观察量.我要问的是,是否有任何已经融入框架的方法(这不需要我为可观察量编写大量的样板),只是在服务和组件之间建立一个可变轨道.

Answer 1

Observables可以在没有太多样板的情况下使用Behaviors.

@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以后只获取值,则不会出现错误,例如异步调用完成时.