更新データ - サブスクライブ

Question

観察可能私は後に、サイト

ファイル構造の各ページに入力した固定ナビゲーションバーのファイルにページのタイトルを表示したい：

-navbar.ts   (where I display the title, import current title from service) 
-titles.service.ts (store the current title) 
-component_one.ts (Send title 1 to service) 
-component_two.ts (Send title 2 to service) 

---

navbar.tsをファイル

import { Component, OnInit,} from '@angular/core'; 
import { Subscription } from "rxjs"; 
import {TitleService} from './titles.service'; 
import {component_one} from '../component_one'; 
import {component_two} from '../component_two'; 


@Component({ 
selector: '[navbar]', 
template: require('./navbar.html'), 
providers:[TitleService, component_one, component_two] 
}) 

export class Navbar implements OnInit { 
title_page: any; 
_subscription: any; 

constructor(public com_one: component_one, public _titleService:TitleService, public com_two: component_two){ 

    this.title_page = _titleService.title_page; 
    this._subscription = _titleService.titleChange.subscribe((value) => { 
    this.title_page = value; 
    }); //it's ok? 

    } 

ngOnDestroy() { 
    this._subscription.unsubscribe(); 
} 
} 

titles.service.ts

import {Component, Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Subject } from 'rxjs/Subject'; 
import { Subscription } from "rxjs"; 


@Injectable() 
export class TitleService { 
    title_page: any; 


    titleChange: Subject<string> = new Subject<string>(); //it is ok? 

    constructor() { 
    this.title_page = "default title string"; 
    } 

    change(title){ 
    this.title_page = title; 
    this.titleChange.next(this.title_page); //I think is not working 
    } 
} 

component_one.tsが（別のタイトル文字列とcomponent_oneと同じ

import {Component} from '@angular/core'; 
import {TitleService} from '../core/navbar/titles.service'; 

@Component({ 
selector: '[component_one]', 
template: require('./component_one.html') 
providers: [TitleService] 
}) 

export class component_one{ 
title_page: any; 

    constructor(public http: Http, public _titleService: TitleService){ 
    this.title_page = _titleService.title_page; 
    this.changeMyTitle(); //Update Title 
    } 

    changeMyTitle() { 
    this._titleService.change('TITLE OF COMPONENT ONE'); 
    } 

} 

component_two.tsファイルを（私はナビゲーションバーのhtmlファイルに'TITLE OF COMPONENT ONE'を表示したい、ロード後にこのページ） ファイルを、負荷このページの後に、まだ私が間違っているの何、'TITLE OF COMPONENT TWO'を示す最初のページ（コンポーネント1）に入力した後、私は）ナビゲーションバーのhtmlファイルに'TITLE OF COMPONENT two'を示し

import {Component} from '@angular/core'; 
import {TitleService} from '../core/navbar/titles.service'; 

@Component({ 
selector: '[component_two]', 
template: require('./component_one.html') 
providers: [TitleService] 
}) 

export class component_two{ 
title_page: any; 

    constructor(public http: Http, public _titleService: TitleService){ 
    this.title_page = _titleService.title_page; 
    this.changeMyTitle(); //Update Title 
    } 

    changeMyTitle() { 
    this._titleService.change('TITLE OF COMPONENT TWO'); 
    } 

} 

をしたいですか？

@Component({ 
selector: '[component_one]', 
template: require('./component_one.html') 
providers: [TitleService] 
}) 

が代わりに移動：

Answer 1

、あなたのすべてのコンポーネントの内部にTitleServiceproviders一部を使用している場合、それは（providers: [TitleService]）

だからがこれをしない、そのサービスの新しいインスタンスを作成します。サービスを@NgModuleprovidersに変更し、そのモジュール内のすべてのコンポーネントがプロバイダの同じインスタンスを持つようにします。

@NgModule({ 
    imports: [ BrowserModule ], 
    providers: [MyService] 
    declarations: [ App, AnotherApp ], 
    bootstrap: [ App ] 
}) 

全例：古いバージョンのhttps://plnkr.co/edit/qMnXG7oxF3SdTptKHUen?p=info

、

アプリを渡ってそれを共有するために、ブートストラップ機能で共有サービスを置く：

bootstrap(App, [MyService]);