登録方法が変更に反応しない[角度2]

Question

LangServiceの言語を変更するapp.componentのメソッドがあります。変更が発生すると、LangServiceは、すべてのコンポーネントの変更をサブスクライブしたので、Observableオブジェクトを使用して他のすべてのコンポーネントに応答する必要があります。残念ながら、それは起こっていません。言語を変更するための関数を呼び出したapp.componentにのみ応答します。私はどこで間違いを犯したのか分かりません。多分私はAngularを初めて知ったので、全体の概念を誤解しているだけかもしれません。

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

} 

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

} 

ありがとうございました。

Answer 1

各コンポーネントにLangServiceを指定すると、各コンポーネントは独自のインスタンスを取得します。

代わりにあなたが@NgModule()のproviders: [LangService]に追加RC.5を使用する場合、それはあなたが必要とする、その後、それは怠惰なロードされたモジュールだとき以外は（グローバルサービスautomaticallなりますルートコンポーネントまたはbootstrap(AppComponent, [LangService])

で一度だけそれを提供使用するforRoot()）

Answer 2

すべてのコンポーネントでLangServiceのインスタンスを共有する必要があると思います。これを行うには、最上位コンポーネントにLangServiceを入力してください。あなたの場合はおそらくapp.component.ts

あなたはthis記事を介して依存性注入とプロバイダを詳細に理解することができます。