angular - 通过适当的更改跟踪将服务属性绑定(bind)到组件属性

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

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

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

澄清:我知道我可以使用自己创建和推送的可观察对象。我要问的是，是否有任何一种已经嵌入到框架中的方法(不需要我为可观察对象编写大量样板文件)，它只是在服务和组件之间建立了可变轨道.

Answer 1

Observable 无需使用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){};
}

您也可以只绑定(bind)到服务的属性

@Component({
  selector: 'my-selector',
  template: `
  {{categoryService?.activeCategory?.Name}}<br/>
`,
})
export class MySelectorComponent implements OnInit {
  constructor(public categoryService:CategoryService){};
}    

使用 Elvis(或安全导航)运算符，如果 activeCategory 稍后才获取值，例如异步调用完成时，您不会收到错误消息。