アングル2サービス双方向データバインディング

Question

salary.serviceとplayer.componentがあります。給与変数がサービスで更新されると、プレーヤーコンポーネントのビューは更新されますか？それともAngular 2のケースではないのですか？

ページが最初に読み込まれると、player.componentビューに50000が表示されるので、2人は一緒に作業しています。私が困惑している価値を更新しています。私は問題を解決する方法を確認したい人のため

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) }; 

} 

EDITは、ここ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); 
    }; 
} 

、ここにあなたの周りの混乱とすることができますplunkerは以下のとおりです。 http://plnkr.co/edit/oChP0joWuRXTAYFCsPbr?p=preview