javascript - 创建显示处理覆盖的 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

在组件元数据中指定提供程序实际上会创建一个新的可注入(inject)项，其范围仅限于该组件树。

如果您想在应用程序中共享覆盖服务，则需要在 NgModule 中而不是在组件中声明覆盖提供程序。或者，您可以仅将其声明为顶级入口组件(例如 AppComponent)上的提供程序，尽管在其他入口组件/延迟加载模块中使用时可能会导致困惑。

参见https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html以获得更好的解释