创建一个显示处理覆盖的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）上声明为提供商，尽管在其他条目组件/懒惰的模块中使用时可能会引起混乱。

请参阅https://angular.io/docs/ts/latest/guide/hierarchical-depperency-injoction.html，以提供更好的解释