使吐司错误不堆积

Question

吐司堆积错误：

我的代码几乎是敬酒服务，可用于在每个错误时触发此错误：

import { EventEmitter, Injectable } from '@angular/core';
import { ToastEvent } from '../../models/toast/toast-event';
import { ToastType } from '../../enums/toast-type';

@Injectable()
export class ToastService {

    public emitter: EventEmitter<ToastEvent> = new EventEmitter();

    public info(message: string, icon: string = 'fa-info-circle'): void {
        this.emitter.emit({ toast: { type: ToastType.Info, icon, message } });
    }

    public error(message: string, icon: string = 'fa-exclamation-triangle'): void {
        this.emitter.emit({ toast: { type: ToastType.Error, icon, message } });
    }
}

然后将该服务注入到可将其重用于错误的组件中，如下所示：

public async onSaveClick(): Promise<void> {
    // Check the form and show a toast if invalid
    if (!this.formIsValid()) {
        this.toastService.error('There are errors on the form');
        return;
    }

if (this.isEditingCurrentSkin) {
    await this.updateSkin().toPromise();
} else {
    await this.createSkin().toPromise();
}

this.loadAllSkins();
this.onGoBackClick();

}

问题是当我遇到多个错误时，它们会堆叠在一起。我该怎么做，以免堆叠在一起？

Answer 1

为错误和成功消息创建模式组件。因此，一旦用户单击确定，就可以关闭模​​态组件中的模态。发挥组件的输入和输出功能。