6

我需要澄清一下服务和组件属性之间的绑定以及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();
  }
}
4

3 回答 3

7

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

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

Observables 使这很容易。有关示例，请参见检测组件输入的嵌套属性的更改。

于 2016-04-06T09:07:30.690 回答
7

如果您通过引用更新元素（如果您将某些内容更新到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 。

于 2016-04-06T11:17:36.063 回答
0

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

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

在你的组件中是这样的：

  ngDoCheck() {
    this.qty = this.cartService.getTotalQtyInCart();
  }
于 2018-02-04T05:47:38.267 回答