サービスを介してコンポーネント間で情報を共有する

Question

私はheaderTitleServiceを持っていますが、基本的にはheaderコンポーネントにタイトルを動的に設定したいと思っていますが、アップ？私は問題が何であるかを把握するように見えることができるようにImが

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> 

012各成分における

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

線providers: [HeaderTitleService]は、それらが1 HeaderTitleService毎ではなく、それらの間のいずれかを説明することを意味します。あなたのコンポーネントからproviders: [HeaderTitleService]を削除し、代わりにあなたのモジュール定義に置き、これを修正するには

：

@NgModule({ 
    providers: [HeaderTitleService] 
}) 

Answer 2

移動HeaderTitleServiceあなたのモジュールの提供インチ実装では、各コンポーネントにHeaderTitleServiceという新しいインスタンスが追加されます。

これが役に立ちます。