Subscribe method does not respond to changes [Angular 2]

Question

I have a method in my app.component that changes languages ​​in my LangService. When a change occurs, the LangService should then respond with the Observable object to all my other components, as I subscribed to the changes in all my components. Unfortunately, this does not happen. This is just a response to app.component that called a function to change the language. I do not know where I was wrong. Maybe I just don’t understand the whole concept, as I am new to Angular.

Here is the code:

app.component.html

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> {{ title }} </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <ol class="breadcrumb"> <li *ngFor="let lang of langs"> <a (click)="changeLanguage(lang)"> {{ lang }} </a> </li> </ol> </ul> </div> </div> </nav> <router-outlet></router-outlet> 

app.component.ts

 import { Component } from '@angular/core'; import './rxjs-operators'; import { ROUTER_DIRECTIVES } from '@angular/router'; import { LangService } from './lang.service'; import { NotesComponent } from './notes/notes.component'; @Component({ moduleId: module.id, selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], directives: [NotesComponent, ROUTER_DIRECTIVES], providers: [LangService] }) export class AppComponent { title = " Note App for BSC-Ideas"; langs :Array<string> = ['EN', 'CZ']; constructor( private _langService :LangService ) { this._langService.activeLang$.subscribe( success => console.log('done') // It works here ); } changeLanguage(lang :string) :void{ this._langService.changeLanguage(lang); } } 

some other.component.ts

 import { Component, OnInit } from '@angular/core'; import { LangService } from '../lang.service'; @Component({ moduleId: module.id, selector: 'all-notes', templateUrl: 'notes.component.html', providers: [NoteService, LangService] }) export class NotesComponent implements OnInit { mode = 'Observable'; constructor(private _langService :LangService) {} ngOnInit() { this.updatePhrases(this.postPhrases); this._langService.getUpdates().subscribe( success => console.log('is working') //Doesn't work here ); } } 

Langservice

 import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; @Injectable() export class LangService { activeLang = 'EN'; private activeLangSubject = new Subject<string>(); activeLang$ = this.activeLangSubject.asObservable(); getUpdates() :Observable<Object>{ return this.activeLang$.map( response => response || {} ); } changeLanguage(lang :string){ if(lang == 'EN' || lang == 'CZ'){ this.activeLang = lang; this.activeLangSubject.next(lang); } } } 

Thank you for your help.

Answer 1

If you provide a LangService for each component, each component will receive its own instance.

Instead, provide it only once in the root component or bootstrap(AppComponent, [LangService])

If you use RC.5 , add it to providers: [LangService] for @NgModule() , then it will become a global automaticall service (except when it is a lazy loaded module, then you need to use forRoot() )

Answer 2

I think you need to share an instance of LangService throughout your component. To do this, you must provide a LangService in the top-level component. Probably in your case app.component.ts

You can go through this article to learn more about the attachment and dependency provider.