処理オーバーレイを表示するangular2サービスの作成

Question

私は、サイト全体で非同期呼び出しを行うときに処理オーバーレイとして機能する再利用可能なコンポーネントを作成しようとしています。私は場所でサービスを持っていますが、showOverlayが呼び出されたときOverlayComponentが呼び出さを取得していないようです：

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HashLocationStrategy, LocationStrategy } from '@angular/common'; 
import { HttpModule } from '@angular/http'; 
import { AppRoutingModule } from './app-routing.module'; 
import { MainComponent } from './app.mysite.component'; 
import { OverlayComponent } from './app.mysite.overlay.component'; 
import { TrackerComponent } from './pages/tracker/mysite.tracker.component'; 

import { OverlayService } from "./overlay.service"; 

@NgModule({ 
    imports:  [ BrowserModule, AppRoutingModule, HttpModule ], 
    declarations: [ 
        MainComponent, 
        OverlayComponent, 
        NavbarComponent, 
        TrackerComponent, 
        ], 
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}, OverlayService], 
    bootstrap: [ MainComponent ] 
}) 
export class AppModule { } 

TrackerComponent.ts

import { Component, OnInit } from '@angular/core'; 

import { OverlayService } from '../../overlay.service.js'; 

@Component({ 
    moduleId: module.id, 
    selector: 'tracker-component', 
    templateUrl: '/public/app/templates/pages/tracker/mysite.tracker.component.html', 
    providers: [ OverlayService] 
}) 

export class TrackerComponent implements OnInit{ 

    constructor(private http: Http, private overlayService: OverlayService) { 

    } 
    ngOnInit(): void { 


     this.overlayService.showOverlay('Processing...'); //This kicks everything off but doesn't show the alert or overlay 
     this.overlayService.test(); //does exactly what i'd expect 
    } 
} 

を

overlay.service.ts

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

@Injectable() 

export class OverlayService { 
    private message: string; 
    private subject: Subject<any> = new Subject<any>(); 

    showOverlay(msg: string) : void { //When this gets invoked, shouldn't it be invoking a change to this.subject and therefore invoking getMessage() 
     this.message = msg; 
     this.subject.next(msg); 
    } 

    getMessage(): Observable<any> { 
     return this.subject.asObservable(); 
    } 

    test() { 
     return 'test good'; //if I call this function, it works 
    } 

} 

app.mysite.overlay.componentコンポーネントのメタデータでプロバイダを指定

import { Component, OnInit } from '@angular/core'; 
import { OverlayService } from './overlay.service'; 

@Component({ 

    selector: 'overlay-component', 
    templateUrl: '/public/app/templates/mysite.overlay.component.html', 
    styleUrls: ['public/app/scss/overlay.css'], 
    providers: [OverlayService] 
}) 

export class OverlayComponent implements OnInit { 
    private processingMessage: string; 
    constructor(private overlayService: OverlayService) {} 

    ngOnInit() { 
     this.overlayService.getMessage().subscribe((message: string) => { //since i'm subscribed to this, i'm expecting this to get called. It doesn't 
      this.processingMessage = message; 
      alert(this.processingMessage); //never gets hit 
      $('.overlay-component-container').show(); // never gets hit 
     }, 
     error => { 
      alert('error'); 
     }) 
    } 

} 

Answer 1

は、実際に新しいの注射を作成し、そのコンポーネントツリーにスコープ。

オーバーレイサービスをアプリ全体で共有する場合は、オーバーレイプロバイダをコンポーネントではなくNgModuleに宣言する必要があります。また、他のエントリコンポーネント/遅延ロードモジュールで使用すると混乱を招く可能性がありますが、トップレベルエントリコンポーネント（AppComponentなど）のプロバイダとしてのみ宣言することもできます。

は、使用しているAngular2のどのバージョンよりよく説明