Angular 2 服务双向数据绑定

Question

我有一个salary.service 和一个player.component，如果salary 变量在服务中更新，播放器组件中的视图会更新吗？还是在 Angular 2 中不是这样？

当页面第一次加载时，我在 player.component 视图中看到了 50000，所以我知道两者是一起工作的。它正在更新让我难过的价值。

salary.service

export class SalaryService {

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

    constructor() { }

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

}

player.component

export class PlayerComponent {

    constructor(private salaryService:SalaryService) {}

    public salary = this.salaryService.salary;

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

}

编辑

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

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

Answer 1

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

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

看起来像： salary.service.ts

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

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

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

}

player.component.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