角度2で2つの異なるコンポーネント間でサービスのデータ共有を行う方法

Question

私は角度2の学習モードです。私はどのように動作するのか知るために、角度のあるシングルトンサービスを実装しています。 は、これは私が私がそれ故に単一インスタンスのルートモジュール内のプロバイダを提供し、それが正常に動作している1

import { Component } from '@angular/core'; 
import { DataService } from './dataservice'; 

@Component({ 
    selector: 'first', 
    template: ` 
       <div> 
         Your Input : <input type = "text" [(ngModel)] = "ChangeByFirstComponent"> 
         You Entered : {{ChangeByFirstComponent}} 
       </div> 
       ` 
}) 

export class FirstComponent { 
    constructor(private _dataService: DataService) { } 
    ChangeByFirstComponent: string; 

    get DataValue(): string { 
     return this._dataService.dataValue; 
    } 

    set DataValue(ChangeByFirstComponent) 
     { 
      this._dataService.dataValue = this.ChangeByFirstComponent; 
     } 
} 
second one 
import { Component } from '@angular/core'; 
import { DataService } from './dataservice'; 

@Component({ 
    selector: 'second', 
    template: ` 
       <div> 
         Your Input : <input type = "text" [(ngModel)] = "ChangeBySecondComponent"> 
         You Entered : {{ChangeBySecondComponent}} 
       </div> ` 

}) 

export class SecondComponent { 
    constructor(private _dataService: DataService) { } 
    ChangeBySecondComponent: string; 

    get DataValue(): string { 
     return this._dataService.dataValue; 
    } 

    set DataValue(ChangeByFirstComponent) { 
     this._dataService.dataValue = this.ChangeBySecondComponent; 
    } 
} 

最初にこのサービスを使用していますどこそれは私の2つのコンポーネントである

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

@Injectable() 
export class DataService { 
    constructor() { 
     console.log("new instance"); 
    } 
    dataValue: string = "i am singleton"; 
} 

ここに私のサービスクラスであります私はそれが開発者のツールを投げることを確認した。 私は、firstcomponentから値を変更してsecond componentを（これがシングルトンが提供したもので、簡単にデータを共有できるように）変更する必要がある場合、それを実装しています。私は私の出力を得ていない。何が問題ですか ？

Answer 1

あなたはより多くの私はすでにデータを共有するための同様の質問サービスにおけるhere