Ошибки в тостах не складываются

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

создать модальный компонент для сообщений об ошибках и успехах. поэтому, как только пользователь нажмет ок, закройте модальное в модальном компоненте. Играть с функцией ввода и вывода компонентов.