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

Posted 2023-02-23

【中文标题】创建一个显示处理覆盖的 angular2 服务

【英文标题】：Creating a angular2 service that displays a processing overlay

【发布时间】：2017-04-14 06:32:11

【问题描述】：

我正在尝试创建一个可重用的组件，在跨站点进行异步调用时用作处理覆盖。我有一个服务，但是在调用 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');
        )
    

【问题讨论】：

你用的是什么版本的Angular2？

应该是目前发布的。我的 package.json 中的所有内容都是 2.1.1（我想说 beta 17）

TrackerComponent 正在使用import OverlayService from '../../overlay.service.js'; 导入尝试删除“.js”扩展名

当我更改该路径时，结果如下：

public/app/ts/pages/Tracker/mysite.tracker.component.ts(10,32)：错误 TS2307：找不到模块“./overlay.service”。 [nodemon] 无法启动进程，exec 参数可能有问题 events.js:165 throw err; ^

【参考方案1】：

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

如果你想跨应用共享覆盖服务，你需要在 NgModule 中声明覆盖提供者，而不是在组件中。或者，您可以将其仅声明为***入口组件（例如 AppComponent）上的提供程序，但在其他入口组件/延迟加载模块中使用时可能会引起混淆。

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

【讨论】：

谢谢。我现在正在阅读此内容，但是一旦从组件的提供程序数组中删除 OverlayService，我就会得到 Error: Error in http://marcswilson-dev.com/app/../public/app/ts/pages/tracker/mysite.tracker.component.js class TrackerComponent_Host - inline template:0:0 caused by: No provider for OverlayService!

你有一个 NgModule 来声明提供者吗？

嗯，不应该是这样。 OverlayComponent 是在 MainComponent 的模板中设置的，还是在 index.html 中设置的？

它现在驻留在我的 MainComponent 中，但我只是尝试将它移到 index.html 中，但没有成功。

我也面临同样的问题