如何使用角度2中的正确更改跟踪将服务属性绑定到组件属性

发布时间：2020-12-17 07:57:40 所属栏目：安全来源：网络整理

导读：考虑完全简单的angular2服务： import { Injectable } from '@angular/core';import {Category} from "../models/Category.model";@Injectable()export class CategoryService { activeCategory: Category|{} = {}; constructor() {};} 然后使用此服务的组件

考虑完全简单的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){};
}

使用Elvis(或安全导航)运算符,如果activeCategory稍后仅获取值,例如异步调用完成时,则不会收到错误.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!