角度サービスから更新された値を表示

Question

私は、プロジェクト内の多くのモジュールで使用されるヘッダーコンポーネントを持っています。現在のビューのタイトルが表示されます。

現在のページコンポーネント（client-list-component.ts）では、サービスのchangeTitleメソッドを呼び出してタイトルを変更しています。私はメソッドが新しい値を取得しているVSコードのブレークポイントを介して確認しましたが、新しい値はpage-header.component.htmlには表示されません。代わりに、サービスに設定されているデフォルトのタイトルが表示されます（「タイトルセットなし」）。

PageHeaderComponentは、共有モジュールの一部です。私は角度5

クライアント・リストcomponent.ts

import { Component, OnInit } from '@angular/core'; 
import { PageHeaderService } from "../../shared/page-header/page-header.service"; 

@Component({ 
    selector: 'client-list', 
    templateUrl: './client-list.component.html', 
    styleUrls: ['./client-list.component.scss'] 
}) 
export class ClientListComponent implements OnInit { 

    public hasClients = false; 
    public title: string; 

    constructor(private data: PageHeaderService) { } 

    ngOnInit() { 
    this.data.changeTitle("Clients") 
    } 
} 

ページ-header.service.ts

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

@Injectable() 
export class PageHeaderService { 

    private titleSource = new BehaviorSubject<string>("No Title Set"); 
    currentTitle = this.titleSource.asObservable(); 

    constructor() { } 

    changeTitle(title: string) { 
    this.titleSource.next(title) 
    } 

} 

ページ-header.component.tsを使用してい

import { Component, OnInit } from '@angular/core'; 
import { PageHeaderService } from "./page-header.service"; 

@Component({ 
    selector: 'app-page-header', 
    templateUrl: './page-header.component.html', 
    styleUrls: ['./page-header.component.scss'], 
    providers: [PageHeaderService] 
}) 
export class PageHeaderComponent implements OnInit { 

    public showSearch = false; 
    public search: string; 
    public title; 

    constructor(private data: PageHeaderService) { } 

    ngOnInit() { 
    this.data.currentTitle.subscribe(title => this.title = title); 
    } 

} 

page-header.component .htmlを

<header> 
    <div fxFlex fxFlexLayoutAlign="center"> 
     <div class="title"> 
      <h1>{{title}}</h1> 
     </div> 
    </div> 
</header> 

shared.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { MaterialModule } from '../material.module'; 

import { PageHeaderService } from './page-header/page-header.service'; 
import { PageHeaderComponent } from './page-header/page-header.component'; 


@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    MaterialModule 
    ], 
    declarations: [ 
    PageHeaderComponent 
    ], 
    exports: [ 
    FormsModule, 
    MaterialModule, 
    CommonModule, 
    PageHeaderComponent 
    ], 
    providers: [ 
    PageHeaderService 
    ] 
}) 
export class SharedModule { } 

Answer 1

があなたの代わりに、ヘッダー・コンポーネントのモジュールでPageHeaderServiceを提供試すことができます。

ページのヘッダー・コンポーネントにサービスを提供する場合は、PageHeaderServiceのインスタンスは、のために、おそらくあなたがここに欲しいものではありませんコンポーネントのすべてのインスタンスが作成されます。

Answer 2

角度サービスでマルチモジュールを使用する場合、noyシングルトンです。各モジュールはこのサービスのインスタンスを作成します： https://angular.io/guide/dependency-injection#singleton-services

Answer 3

私たちが角度サービスでマルチモジュールを使用する場合、noyシングルトンです。 https://angular.io/guide/dependency-injection#singleton-services