Settimeout löst in meinem Winkelcode keine Änderungserkennung aus ⇐ JavaScript

[Anonymous]

Ich bin neu in Angular, also korrigieren Sie mich, wenn ich in irgendeinem Punkt falsch liege. Ich habe also im Grunde genommen versucht, einen Toast-Dienst für mein E-Com-Projekt zu erstellen. Ursprünglich war dies mein Code unten ... es gibt ein Toast-Array und eine Add-Funktion. Wir können eine Nachricht in der Add-Funktion weitergeben, sie wird in das Toast-Array eingefügt, das Frontend wird sie rendern und ein Settimeout wird ausgeführt und nach 5 Sekunden wird die Nachricht aus dem Toast-Array entfernt. CD wird aufgrund von Settimeout ausgelöst und das Frontend stoppt das Rendern der Nachricht

Code: Select all

// toast.service.ts
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root',
})

export class ToastService {

toasts: { message: string; duration: number; type: 'success' | 'error' }[] = [];

add(message: string, duration: number = 3000, type: 'success' | 'error' = 'success') {
this.toasts.push({ message, duration, type });
setTimeout(() => this.remove(0), duration);
}

remove(index: number) {
this.toasts.splice(index, 1);
}
}

aber das Problem bestand darin, dass die Toastnachricht nach Abschluss von settimeout aus dem Array entfernt wurde, die Nachricht jedoch immer noch auf meiner Seite angezeigt wurde....

später habe ich Signale verwendet und das Problem wurde gelöst

Code: Select all

@Injectable({
providedIn: 'root',
})
export class ToastService {
toasts = signal([]);

create(message: string, type: AlertType): void {

const toastItem: ToastInfo = { message, type };

this.toasts.update(t => [...t, toastItem]);

of(toastItem)    //creating a observale
.pipe(delay(5000)) // inserting into pipe
.subscribe(()=>{
this.remove(toastItem) //emitting
})
}
remove(value: ToastInfo){
this.toasts.update(t => t.filter(item => item !== value));
console.log(this.toasts);
}
}

Meine Frage ist, warum es mit settimeout nicht funktioniert hat. Angular führt seine CD aus, nachdem setimeout abgeschlossen ist. Dann ist das Array leer und es wird keine Nachricht zum Rendern angezeigt...