Question

这个有点痛苦，让我难倒了一会儿。希望你能帮忙！

我有一个模块UICoreModule，其中包含许多组件，服务等。这些服务是通过ModuleWithProviders方法提供的，因为它被捆绑并发布到npm。

我正在实现一个全局错误处理程序，它使用bugsnag-angular登录到bugsnag。那部分有效。什么不起作用是拿起UIToastService来显示用户消息。它找到了服务并且似乎工作，甚至到达了拿起吐司并显示消息的UIToastComponent，但消息没有显示。我使用injector尝试了this.inject.get(UIToastService)方法无济于事。

还有一点奇怪的是，如果UIToastService注入了任何内容，例如Router我在运行时遇到 Circluar Dependency 错误。

模块看起来像这样：

import { ErrorHandler, ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { UIToastComponent } from './components/toast/toast.component';

import { UIToastService } from './services/toast.service';

import { UIErrorHandler } from './handlers/error.handler';

@NgModule({
    declarations: [
        UIToastComponent,
    ],
    imports: [
        CommonModule,
        RouterModule,
        HttpClientModule,
    ],
    exports: [
        UIToastComponent,
    ]
})
export class UICoreModule {

    public static forRoot(): ModuleWithProviders {
        return {
            ngModule: UICoreModule,
            providers: [

                UIToastService,

                {
                    provide: ErrorHandler,
                    useClass: UIErrorHandler
                }

            ]
        };
    }
}

错误处理程序......

import { ErrorHandler, Injectable } from '@angular/core';
import BugsnagErrorHandler from 'bugsnag-angular';
import bugsnag from 'bugsnag-js';

import { UIToastService } from '../services/toast.service';

@Injectable()
export class UIErrorHandler implements ErrorHandler {

    bugsnagKey: string;
    bugsnagClient: any;
    bugsnagErrorHandler: BugsnagErrorHandler;

    constructor(
        private uiToastService: UIToastService
    ) {
        this.setBugsnagKey('MY_BUGSNAG_KEY');
    }

    setBugsnagKey(bugsnagKey: string): void {

        if (bugsnagKey !== this.bugsnagKey) {
            this.bugsnagKey = bugsnagKey;
            this.bugsnagClient = bugsnag({
                apiKey: this.bugsnagKey
            });

            this.bugsnagErrorHandler = new BugsnagErrorHandler(this.bugsnagClient);
        }

    }

    handleError(error: any): void {
        this.bugsnagErrorHandler.handleError(error);
        this.uiToastService.error('some error');
    }
}

UIToastService ...

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Rx';

import { UIToast } from '../models/toast.model';

@Injectable()
export class UIToastService {

    toasts$: Subject<UIToast[]> = new Subject<UIToast[]>();
    toasts: UIToast[] = [];

    error(message: string): void {
        this.add(new UIToast({
            message: message,
            type: 'error'
        }));
    };


    add(toast: UIToast): void {

        this.toasts.push(toast);
        this.toasts$.next(this.toasts);

    }

}

最后是UIToastComponent，它位于app.component.html 文件...

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';

import { UIToastService } from '../../services/toast.service';
import { UIToast } from '../../models/toast.model';

@Component({
    selector: 'ui-toast',
    templateUrl: './toast.component.html',
    styleUrls: ['./toast.component.min.css']
})

export class UIToastComponent implements OnInit{

    toasts: UIToast[] = [];

    constructor(
        private toastService: UIToastService
    ) {
    }

    ngOnInit(): void {

        this.toastService.toasts$.subscribe((toasts: UIToast[]) => {
            this.toasts = toasts;
        });

    }

}

如果你能以任何方式提供帮助，我真的很看好这个问题，永远的感激是你的。我很欣赏它有点奇怪！

谢谢＆lt; 3

在ErrorHandler中使用ModuleWithProviders中的服务

0 个答案: