服务和组件属性之间的 angular2 数据绑定答案

【问题标题】：angular2 data binding between service and component properties服务和组件属性之间的 angular2 数据绑定
【发布时间】：2016-07-26 13:44:51
【问题描述】：

我需要澄清一下服务和组件属性之间的绑定以及 angular2 中的数据绑定

假设我有一个服务（单例）和一个组件

export class Service {
 name = "Luke";
 object = {id:1};
 getName(){return this.name};
 getObject(){return this.object};
}

export class Component implements OnInit{
 name:string;
 object:any;
 constructor(private _service:Service){}
 ngOnInit():any{

   //Is this 2 way binding?
   this.name = this._service.name;
   this.object = this._service.object;

   //Is this copying?
   this.name = this._service.getName();
   this.object = this._service.getObject();
  }
}

【问题讨论】：

标签： data-binding angular angular2-services two-way

【解决方案1】：

如果您通过引用更新元素（如果您将某些内容更新到 object 属性中），您将在视图中看到更新：

export class Service {
  (...)

  updateObject() {
    this.object.id = 2;
  }
}

如果您按值更新元素（如果您将某些内容更新到 name 属性中），您将不会在视图中看到更新：

export class Service {
  (...)

  updateName() {
    this.name = 'Luke1';
  }
}

看到这个 plunkr：https://plnkr.co/edit/w7bS0fAVjOc3utnpD39b?p=preview。

【讨论】：

我明白了，因为在第一种情况下，我创建了两个指向同一个对象的引用，而下面我会再次“复制”该属性？
但是等等，这是否意味着如果我在服务单例中有一个引用数据类型，并在各种组件中创建指向它的新引用，每次我更改视图都会自动更新它？ ?
@HanChe，是的，所有视图都会自动更新，因为您的所有模板绑定都绑定到同一个/一个对象。您的所有组件都有自己的引用，但它们都指向同一个 Singleton 服务，然后所有模板绑定都有自己的引用，但它们都指向该 Singleton 中的同一个对象。所以一切正常。
@MarkRajcok 谢谢！但这是保存使用吗？有什么大的陷阱吗？

【解决方案2】：

Angular 绑定仅适用于在视图 (HTML) 中声明的绑定。

如果您希望在服务中的值更改时更新组件中的属性，则需要自己处理。

Observable 让这一切变得简单。示例见detect change of nested property for component input。

【讨论】：

您好 Günter，感谢您的回复，是的，我在 observables 上，但如果 this.name = this._service.name;它是做什么的，那么它只是一个简单的副本吗？
是的，它会在调用 ngOnInit() 时复制一次值。例如，如果服务使用 HTTP 请求从远程服务器获取数据，那么this.service.name 中可能还没有值。如果服务稍后收到来自服务器的响应，则组件不会获得新值。
ngOnInit() 只是一个例子，但是使用 this.service.name 和 this.service.getName() 有什么区别呢？如果我在服务中将 name 声明为 private 以保护它并使用 getter 和 setter，是否就像在 java 中一样？
这仅取决于 Service.name 和 Service.getName() 返回的内容。从属性或方法返回的值分配给this.name，仅此而已。不涉及 Angular。这正是 TypeScript 所做的。

【解决方案3】：

如果您希望在服务中的值更改后立即更新组件中的属性：

将DoCheck 从@angular/core 和您的service 导入到组件。
调用ngDoCheck(){...}中影响组件属性的服务函数
组件视图将在任何更改后自动更新

你的组件中有这样的东西：

  ngDoCheck() {
    this.qty = this.cartService.getTotalQtyInCart();
  }

【讨论】：