創建一個顯示處理覆蓋的angular2服務

Question

我想創建一個可重用的組件，在跨站點進行異步調用時充當處理覆蓋。我有一個服務到位，但OverlayComponent似乎並不時showOverlay被調用到被調用：

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的一個更好的解釋