单实例 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

如果你使用 Injectable 装饰器的providedIn 属性构建一个简单的通知服务，你只会得到一个实例。您无需创建 sharedModule。

然后您可以将通知服务注入 ErrorHandler 服务。

@Injectable({
  providedIn: 'root'
})
export class ErrorHandlerService {
   // ...
   constructor(private notificationService: NotificationService) {}
}

但是根据您发布的代码，我认为我遗漏了一些关键点，即增加该代码复杂性的目的？

Answer 2

在花了几个小时查看这个之后......似乎当您抛出 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，它可以帮助您管理您的状态和通知。