1

这个有点痛，让我难倒了一段时间。希望你能帮忙！

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

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

同样奇怪的是，如果UIToastService注入了任何东西，比如Router我在运行时得到一个循环依赖错误。

模块看起来有点像这样：

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

    }

}

我从字面上看这个问题，如果你能以任何方式提供帮助，我会永远感激你。我很感激这有点奇怪！

谢谢 <3

4

0 回答 0