Angular 2 - Using a Shared Service

Question

It seems that collaborative services are the best practice for solving many situations, such as exchanging data between components or replacing the old concept of $ cccorn angular 1. I am trying to create my own, but it does not work. Any help? ty !!!

app.component.ts

import {Component} from 'angular2/core'; import {OtherComponent} from './other.component'; import {SharedService} from './services/shared.service'; @Component({ selector: 'my-app', providers: [SharedService], directives: [OtherComponent], template: ` <button (click)="setSharedValue()">Add value to Shared Service</button> <br><br> <other></other> ` }) export class AppComponent { data: string = 'Testing data'; setSharedValue(){ this._sharedService.insertData(this.data); this.data = ''; console.log('Data sent'); } constructor(private _sharedService: SharedService){} } 

other.component.ts

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

Answer 1

In most cases, you need to define your common service when downloading the application:

 bootstrap(AppComponent, [ SharedService ]); 

and not defining it again in the providers attribute of your components. This way you will have one instance of the service for the entire application.

---

In your case, since OtherComponent is an auxiliary component of your AppComponent , simply remove the providers attribute as follows:

 @Component({ selector : "other", // providers : [SharedService], <---- template : ` I'm the other component. The shared data is: {{data}} `, }) export class OtherComponent implements OnInit{ (...) } 

This way they will use the same service instance for both components. OtherComponent will use one of the parent component ( AppComponent ).

This is due to the function of the "hierarchical injectors" of Angular2. For more information see this question:

• What is the best way to insert one service into another in angular 2 (beta)?

Answer 2

You need to add a global provider to your module, then you do not need to add this provider to each component. try it

app.module.ts

 @NgModule({ imports: [BrowserModule, FormsModule, HttpModule], declarations: [AppComponent, LoginComponent, InComponent], providers: [LoginService], bootstrap: [AppComponent] }) 

app.component.ts

 @Component({ moduleId: module.id, selector: 'app', templateUrl: './app.component.html' }) export class AppComponent { constructor(public loginService: LoginService) { } } 

login.component.ts

 @Component({ moduleId: module.id, selector: 'login', templateUrl: './login.component.html' }) export class LoginComponent { constructor(public loginService: LoginService) { } } 

I hope this work is for you.