angular - 单实例 Angular 2+ 通知服务/错误处理程序

Question

我对 Angular 2+ 还很陌生，所以如果我离题了，请多多包涵。我的目标是在整个应用程序中使用共享通知服务。在大多数情况下，我让它工作正常。它是一个惰性模块结构，因此为了避免多个实例出现问题(我花了一段时间才弄清楚这个问题)，我不得不在我的 SharedModule 类中添加一个 forRoot() 方法，如下所示:

export class SharedModule {
 static forRoot(): ModuleWithProviders {
  return {
    ngModule: SharedModule,
    providers: [
      NotificationService,
      {
        provide: ErrorHandler,
        useClass: ErrorHandlerService
      }]
  };
}

}

然后，将 SharedModule 添加到调用 forRoot() 的 AppModule 中:

@NgModule({
 declarations: [...],
 imports: [
  ...
  SharedModule.forRoot()
  ...
 ],
 providers: [...],
 bootstrap: [...]
})
export class AppModule { }

我很高兴看到通知服务在我的延迟模块中运行良好，只需将 SharedModule 添加到延迟加载的模块，然后从组件进行 notificationService 调用。

问题在于全局错误处理程序(在 SharedModule 中的 forRoot() 中提供，见上文)， 看起来像 它可能正在创建通知服务的第二个实例并且它不能正常工作。

我想首先，我的结构正确吗？如果是这样，我做错了什么以至于通知服务表现得很奇怪？

这是错误处理程序服务的代码:

     import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { NotificationService } from './notification.service';

@Injectable()
export class ErrorHandlerService implements ErrorHandler {
  constructor(private injector: Injector) { }

  handleError(error: Error) {
    const notificationService = this.injector.get(NotificationService);
    const router = this.injector.get(Router);
    if (error instanceof HttpErrorResponse) {
      if (!navigator.onLine) {

      } else {
        console.log('Http error!');
        notificationService.error('Error!', error.message);
      }
    } else {

    }
    console.error('It happens: ', error);
  }
}

同样，从组件调用通知服务工作正常，从错误处理服务调用时行为完全不同。我得到的行为类似于我在将 forRoot() 方法添加到 SharedModule 模块之前从组件中得到的行为，因此是多实例理论。

任何帮助表示赞赏。谢谢

--- 编辑 ---

我创建了 Stackblitz 以显示从组件调用通知服务与从错误处理程序服务调用通知服务时的不同行为。显示通知按钮按预期显示通知，但是在进行错误http调用时，请注意第一次单击时，通知不显示，如果继续播放，有时会突然消失，或根本不消失，而使用显示通知按钮时您无法做到这一点。

Click here for Stackblitz

Answer 1

在花了几个小时看这个之后......似乎当你抛出 http 异常时，UI 并没有接受这些更改。

您可能需要向更熟悉变更检测的人提出另一个问题，以确定确切原因……但这里有一个解决方法。

在通知组件中:

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

  constructor(private notificationService: NotificationService, private cd: ChangeDetectorRef) { }

  ngOnInit() {
    this.notificationService.getNotification().subscribe((notification: Notification) => {
      if (notification) {
        this.show = true;
        this.notification = notification;
        this.cd.detectChanges();        // <- Add this line
        // the rest of your code here
      }
    });
  }

这是另一篇文章以获取更多信息，其中包含一些关于更改检测的文章的链接: How to trigger a change event manually - angular2

如果您刚刚开始，您还可以考虑使用 NgRx，它可以帮助您管理您的状态和通知。