javascript - 从多个组件更新服务数据 - Observable subscribe

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

标题.服务.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 文件 (加载此页面后，我想在导航栏 html 文件上显示 'TITLE OF 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 文件(与 component_one 相同，但标题字符串不同，加载此页面后，我想在导航栏 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');
  }

}

进入第一页(组件一)后仍然显示'TITLE OF COMPONENT TWO'，我做错了什么？

Answer 1

如果您在每个组件 providers 部分中使用您的 TitleService，它将创建该服务的一个新实例(providers: [TitleService] )

所以不要这样做:

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

而是将服务移至 @NgModule providers 以便该模块内的每个组件都将具有相同的提供者实例:

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

完整示例:https://plnkr.co/edit/qMnXG7oxF3SdTptKHUen?p=info

对于旧版本，

将共享服务放在引导函数中以在整个应用程序中共享它:

bootstrap(App, [MyService]);