在 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 邏輯完全分離：

1. 創建一個通知（toaster）組件，該組件將訂閱錯誤、警告、信息、成功消息
2. 創建一個能夠發送消息和通知組件以使用它們的服務。

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

示例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()}`
    );
  }
}

因此，現在只要您在任何組件中注入通知服務並通過該服務發送消息，通知組件就能夠訂閱它並在全球范圍內顯示它們。 這是一個Stackblitz展示它的工作。

顯然這是非常簡化的，你需要實現更多，但這應該讓你走上正軌。

一個改進是從通知服務中刪除error$ observable，只允許通知組件訪問它。 您可以通過實現一個內部通知服務來實現這一點，該服務將充當通知服務和通知組件之間的橋梁。 你贏什么？ 通知服務不再公開error$ observable，只公開發送消息的方法。

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