我在父页面组件中嵌套了子组件。当前,我有一个事件发射器,如果遇到错误,它将发出错误事件和消息给要显示的父组件。有没有一种方法可以使错误消息冒泡,使它们显示在所有页面上。我正在考虑使用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;
}
有没有办法使它可扩展,所以我不必为每个页面而是每个组件都重写此代码?
答案 0 :(得分:2)
简而言之,该想法是将错误与UI逻辑完全脱钩:
示例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$
可见的内容,仅允许Notification组件访问它。您可以通过实现内部通知服务来实现这一点,该服务将充当通知服务和通知组件之间的桥梁。你赢了什么?通知服务不再公开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) {}
}