Javascript 创建显示处理覆盖的angular2服务

我试图创建一个可重用组件，当在我的站点上进行异步调用时，该组件充当处理覆盖层。我有一个服务，但是当调用

showOverlay

时，OverlayComponent似乎没有被调用：

应用程序模块.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 { }

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
    }
}

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
    }

}

TrackerComponent.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 { }

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
    }
}

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
    }

}

overlay.service.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 { }

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
    }
}

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
    }

}

---

在组件元数据中指定提供程序实际上会创建一个新的可注入的、作用域为该组件树的提供程序

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

---

有关更好的解释，请参见

谢谢。我现在正在读这篇文章，但一旦我从组件的提供程序数组中删除

overlyservice

，我就会得到

Error:Error-inhttp://marcswilson-dev.com/app/../public/app/ts/pages/tracker/mysite.tracker.component.js 类TrackerComponent_主机-内联模板：0:0原因：OverlyService没有提供程序你有一个声明提供者的NgModule吗？嗯，不应该是这样的。OverlyComponent是在MainComponent的模板中设置的，还是在index.html中设置的？它现在位于我的MainComponent中，但我只是尝试将其移动到index.html中，但没有成功。我也面临同样的问题。您使用的Angular2的版本是什么？它应该是当前发布的版本。我的package.json中的所有内容都是2.1.1（我想说beta 17）TrackerComponent正在从“../../overlay.service.js”导入，
import{OverlayService}尝试删除“.js”扩展当我更改该路径时，它会导致以下结果：public/app/ts/pages/Tracker/mysite.Tracker.component.ts（10,32）：错误TS2307:找不到模块“/overlay.service”。[nodemon]无法启动进程，exec arguments events可能存在问题。js:165抛出错误^