Get and update a string through a service in Angular 2

Question

I am trying to better understand services with a very simple application that receives and updates the value of a string inside a service and displays it in a component.

Here's the service:

import {Injectable} from 'angular2/core'; @Injectable() export class SharedService { dataString: string; insertData(data) { this.dataString = data } } 

Here's the main "application":

 import {Component} from 'angular2/core'; import {OtherComponent} from './other'; import {SharedService} from'./shared.service'; @Component({ selector: 'my-app', providers: [SharedService], directives: [OtherComponent], template: ` <input type="text" #someValue> <button (click)="setSharedValue(someValue.value)">Change value in shared service</button> <br><br> <other></other> ` }) export class AppComponent { constructor(private _sharedService: SharedService){} setSharedValue(value){ this._sharedService.insertData(value); } } 

... and here is the "other" component:

 import {Component, OnInit} from 'angular2/core'; import {SharedService} from './shared.service'; @Component({ selector : "other", template : ` I'm the other component. The shared data is: <p>{{data}}</p> `, }) export class OtherComponent implements OnInit{ data: string; constructor(private _sharedService: SharedService){} ngOnInit() { this.data = this._sharedService.dataString; } } 

Here is the plunkr.

When the text is added to the input and the button is pressed, I want to display the value entered in the "other" component to demonstrate the receipt and configuration of service data. However, he just fails.

Can someone explain what I'm doing wrong?

thanks

Answer 1

Your code is correct, only your other component does not know that you have updated the service, so it will not request new data. For this case, Angular2 uses Observables:

Service:

 @Injectable() export class SharedService { // Observable string source private dataStringSource = new Subject<string>(); // Observable string stream dataString$ = this.dataStringSource.asObservable(); // Service message commands insertData(data: string) { this.dataStringSource.next(data) } } 

Main component

 @Component({ selector: 'my-app', providers: [SharedService], directives: [OtherComponent], template: ` <input type="text" #someValue> <button (click)="setSharedValue(someValue.value)">Change value in shared service</button> <br><br> <other></other> ` }) export class AppComponent { constructor(private _sharedService: SharedService){} setSharedValue(value){ this._sharedService.insertData(value); } } 

Another component

 @Component({ selector : "other", template : ` I'm the other component. The shared data is: <p>{{data}}</p> `, }) export class OtherComponent implements OnInit{ data: string; constructor(private _sharedService: SharedService){} ngOnInit() { this._sharedService.dataString$.subscribe( data => { this.data = data; }); } } 

The updated plunker can be found here: https://plnkr.co/edit/neM6EdYYUkGkRpF0fKGS?p=preview

The interaction between the components in Angular2 can be found here: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

Perhaps using observables is the right thing, but there is an alternative approach. Do not add providers: [ SharedService ] to any component, otherwise the components will receive a different instance. Provide it only once at boot ().

 bootstrap(AppComponent, [ SharedService ]); 

then include this service in the constructor of each component.

 constructor(private _sharedService: SharedService){} 

then you can set the value as:

 this._sharedService.setSharedValue("your input"); 

and get the value as:

 this.data = this._sharedService.dataString; 

Answer 3

I think you are doing the right thing, just skip the last step that Observables should use. I hope this link here can help.