Timer in Winkelanwendung

Question

Ich arbeite an einer Winkelanwendung. Ich möchte einen Timer in meiner Anwendung verwenden, sodass beim Aufrufen dieses Timers und Übergeben eines dynamischen Zeitwerts danach ein Popup angezeigt wird.

Wenn ich beispielsweise einen Timer starte und ihm 60 Sekunden übergebe, sollte nach 60 Sekunden ein Popup angezeigt werden. Ich habe Code für mein Popup, weiß aber nicht, wie ich einen Timer implementieren soll, der zur Laufzeit dynamische Zeit liefert. Außerdem muss ich den Timer löschen, falls ich in diesen 60 Sekunden eine Antwort vom Backend erhalte oder welchen dynamischen Wert ich für den Timer übergebe. Wie kann ich das machen?

Answer 1

Sie können rxjsTimer verwenden. Zunächst Import-Timer-Formularrxjs

import { Subscription, timer } from 'rxjs'

dann in Ihrer Komponente:

  public timer: Subscription;

  ngOnInit() {

  }

  showPopupAfterSpecificTime(time = 10000) {
    const numbers = timer(time);
    this.timer = numbers.subscribe(x => this.openPopup());
  }

  private openPopup() {
    console.log("Now You Can Open Your Modal")
  }

  ngOnDestroy(): void {
    if (this.timer) this.timer.unsubscribe()
  }

Der Standardwert für showPopupAfterSpecificTimeist 10 Sekunden. Sie können Ihre Zeit vertreiben

In Ihrem HTML: Hier vergehen 5 Sekunden

<button type="button" (click)="showPopupAfterSpecificTime(5000)">
  open Popup
</button>

HINWEIS :

Um Speicherverluste zu vermeiden, müssen Sie unsubscribeinngOnDestroy

Stackblitz hier