创建一个显示处理覆盖的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的一个更好的解释