Angular 2 服务双向数据绑定

我有一个salary.service and a player.component，如果服务中的工资变量更新，玩家组件中的视图是否也会更新？或者 Angular 2 中不是这样吗？

当页面首次加载时，我在player.component 视图中看到 50000，所以我知道两者正在协同工作。它正在更新让我困惑的价值。

工资.服务

export class SalaryService {

    public salary = 50000; // starting value which gets subtracted from

    constructor() { }

    public setSalary = (value) => { this.salary = this.salary - value };

}

玩家组件

export class PlayerComponent {

    constructor(private salaryService:SalaryService) {}

    public salary = this.salaryService.salary;

    public updateSalary = (value) => { this.salaryService.setSalary(value) };

}

EDIT

对于任何想了解我如何解决该问题的人，这里是 Plunker：

http://plnkr.co/edit/aFRXHD3IAy0iFqHe5ard?p=preview

不，你定义的方式public salary = this.salaryService.salary正在复制该值而不是分配对工资的引用。它们是内存中不同的实例，因此不能期望玩家组件中的薪水与服务中的薪水相同。

如果您有一个有薪水的玩家并将其传递给服务进行操作，那么视图将正确调整，因为它将在正确的对象上操作。

那看起来像：工资.service.ts

import {Injectable} from "@angular/core";

@Injectable()
export class SalaryService {
    constructor() { }

    public setSalary = (player, value) => {
      player.salary -= value;
    };

}

玩家组件.ts

import { Component } from "@angular/core";
import { SalaryService } from "./salary.service";

@Component({
  selector: 'player',
  template: `
  <div>{{player.salary}}</div>
  <button (click)="updateSalary(player, 50)" type="button">Update Salary</button>
  `
  providers: [SalaryService]
})
export class PlayerComponent {
    player = { id: 0, name: "Bob", salary: 50000};
    constructor(private salaryService:SalaryService) {

    }

    public updateSalary = (player, value) => {
      this.salaryService.setSalary(player, value);
    };
}

最后，这是一个你可以乱搞的笨蛋：http://plnkr.co/edit/oChP0joWuRXTAYFCsPbr?p=preview