geteilte Informationen zwischen den Komponenten durch Service funktioniert nicht

Question

Ich habe einige Probleme, dies herauszufinden, im Grunde habe ich eine headerTitleService, die ich in der Lage sein, den Titel in meiner header Komponente dynamisch zu setzen, aber aus irgendeinem Grund, wenn ich den Titel nichts zeigt oben? Im keine Fehler bekommen, damit ich scheinen, um herauszufinden, was das Problem ist ..

headerTitle.service.ts

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class HeaderTitleService { 
    title = new BehaviorSubject(''); 

    constructor() { } 

    setTitle(title: string) { 
    this.title.next(title); 
    } 
} 

header.component.ts

import { Component, OnInit } from '@angular/core'; 
import { HeaderTitleService } from '../../../services/headerTitle.service' 

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.scss'], 
    providers: [HeaderTitleService] 
}) 
export class HeaderComponent implements OnInit { 
    title: string; 

    constructor(
    private headerTitleService: HeaderTitleService 
) { } 

    ngOnInit() { 
    this.headerTitleService.title.subscribe(updatedTitle => { 
     this.title = updatedTitle; 
    }); 
    } 

} 

header.component.html

<h1>{{title}}</h1> 

home.component.ts

import { Component, OnInit } from '@angular/core'; 
import { HeaderTitleService } from '../../services/headerTitle.service'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.scss'], 
    providers: [HeaderTitleService] 
}) 
export class HomeComponent implements OnInit { 

    constructor(
    private headerTitleService: HeaderTitleService 
) { } 

    ngOnInit() { 
    this.headerTitleService.setTitle('hello'); 
    } 

} 

Answer 1

Die Linie providers: [HeaderTitleService] in jeder Komponente bedeutet, dass sie eine HeaderTitleService jedes gegeben werden, und nicht als eine zwischen ihnen.

diese providers: [HeaderTitleService] aus Ihrer Komponenten zu beheben entfernen, und legen Sie sie stattdessen in Ihrer Moduldefinition:

@NgModule({ 
    providers: [HeaderTitleService] 
}) 

Answer 2

Verschieben HeaderTitleService in Anbieter Ihres Moduls. Mit Ihrer Implementierung erhalten Sie eine neue Instanz des HeaderTitleService in jeder Komponente.

Hoffe, das hilft.