创建一个显示处理覆盖的angular2服务
问题描述:
我想创建一个可重用的组件,在跨站点进行异步调用时充当处理覆盖。我有一个服务到位,但OverlayComponent似乎并不时showOverlay
被调用到被调用:创建一个显示处理覆盖的angular2服务
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');
})
}
}
答
指定在组件的元数据提供者实际上创建一个新的可注射的,作用范围包括该组件树。
如果您想跨应用程序共享覆盖服务,则需要在NgModule中声明覆盖提供程序,而不是在组件中声明覆盖提供程序。或者,您可以仅将其声明为顶层条目组件(例如,AppComponent)上的提供者,但在其他条目组件/延迟加载的模块中使用时可能会引起混淆。
为您正在使用什么版本Angular2的一个更好的解释
见https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html? – Fiddles
它应该是目前发布的内容。我的package.json中的所有内容都是2.1.1(我想说beta 17) – mwilson
TrackerComponent正在用'../../ overlay.service.js'中的import {OverlayService}导入;'尝试删除“.js “扩展 – Fiddles