angular - 在 Angular 页面中显示全局错误消息

Question

我有嵌套在父页面组件中的子组件。目前我有一个事件发射器，它会向父组件发出错误事件和消息，以在遇到错误时显示。有没有办法让错误消息冒泡，以便它们显示在所有页面上。我正在考虑使用 appcomponent 文件，但不知道如何处理它。

Child:
@Output() errorEmitter = new EventEmitter();

errorEmission(message: string){
    this.errorEmitter.emit(message);
  }

Parent:
<app-manage (errorEmitter)='displayError($event)'></app-manage>


displayError(message: string) {
    this.errorMessageIsOn = true;
    this.errorMessageString = message;
  }

有没有办法让它可扩展，所以我不必为每个页面重写这个代码，而只是为每个组件重写？

Answer 1

简而言之，这个想法是将错误与 UI 逻辑完全分离:

创建一个将订阅错误、警告、信息、成功消息的通知( toastr )组件

创建一个能够发送消息和通知组件以使用它们的服务。

sample notification.service.ts :

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

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  private readonly errorsSubject$ = new Subject<string>();

  public errors$() { 
    return this.errorsSubject$.asObservable();
  }

  public showError(message: string) : void {
    this.errorsSubject$.next(message);
  }
}

sample notification.component.ts ，您的应用程序中应该只有它的一个实例。

import { Component, Input } from "@angular/core";
import { NotificationService } from "./notification.service";

@Component({
  selector: "notification",
  template: `
    <h2 *ngIf="(error$ | async) as error">Hello {{ error }}!</h2>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class NotificationComponent {
  error$ = this.notificationService.errors$();

  constructor(private readonly notificationService: NotificationService) {}
}

也是一个可以发送消息的示例组件，这可以是任何其他执行此操作的组件。

import { Component, Input } from "@angular/core";
import { NotificationService } from "./notification.service";

@Component({
  selector: "hello",
  template: `
    <button (click)="onClick()">Show error</button>
  `,
  styles: [
    `
      button {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;
  constructor(private readonly notificationService: NotificationService) {}

  onClick(): void {
    this.notificationService.showError(
      `This error has been posted on ${Date.now()}`
    );
  }
}

因此，现在只要您在任何组件中注入(inject)通知服务并通过该服务发送消息，通知组件就能够订阅它并在全局范围内显示它们。这是 Stackblitz显示它工作。

显然这是非常简化的，您需要实现的不止这些，但这应该会让您走上正轨。

一个改进是删除 error$可从通知服务观察到，只允许通知组件访问它。您可以通过实现一个内部通知服务来实现这一点，该服务将充当通知服务和通知组件之间的桥梁。你赢什么？通知服务不再公开 error$可观察的，只有发送消息的方法。
notification.service.ts

import { Injectable } from "@angular/core";
import { Subject } from "rxjs";
import { NotificationInternalService } from "./notification-internal.service";

@Injectable({
  providedIn: "root"
})
export class NotificationService {
  constructor(private readonly internalService: NotificationInternalService){}

  public showError(message: string): void {
    this.internalService.errorSubject$.next(message);
  }
}

notification-internal.service.ts

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

@Injectable({
  providedIn: "root"
})
export class NotificationInternalService {
  public errorSubject$ = new Subject<string>();

  public get error$() {
    return this.errorSubject$.asObservable();
  }
}

和 notification.component.ts现在引用 notification-internal.service.ts

import { Component, Input } from "@angular/core";
import { NotificationInternalService } from "./notification-internal.service";

@Component({
  selector: "notification",
  template: `
    <h2 *ngIf="(error$ | async) as error">Hello {{ error }}!</h2>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class NotificationComponent {
  error$ = this.service.error$;

  constructor(private readonly service: NotificationInternalService) {}
}