html - 超时后检查当前组件

Question

我在一个名为“recoger_success”的组件中，我希望它在单击具有 countdown() 链接的按钮后 10 秒后导航到主组件。问题是，如果我在超时达到 0 之前导航到另一个组件，那么在 10 秒之后，我在哪个组件中并不重要，它总是会转到主组件。我不希望这个我希望它只在用户仍在超时组件上时转到主组件，否则忽略它..

我试过这个来知道实际组件的url，但它不起作用..

countdown(){
  setTimeout(() => {
    if (this.route.snapshot.url.toString() == 'recoger_success'){
        this.router.navigate([""]);
    }
  }, 10000);

}

感谢任何帮助。

Answer 1

将超时分配给变量，并在您手动存在页面时清除超时

countdown(){
  this.timeout = setTimeout(() => {
    if (this.route.snapshot.url.toString() == 'recoger_success'){
        this.router.navigate([""]);
    }
  }, 10000);
}

function myStopFunction() {
    clearTimeout(this.timeout);
}

Answer 2

您需要将 setTimeout 绑定到一个变量。

组件.ts

import { Component, OnDestroy } from '@angular/core';

export class Component implements OnDestroy {

  countdownTimer: any;

  countdown() {
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
    this.countdownTimer = setTimeout(() => {
      if (this.route.snapshot.url.toString() == 'recoger_success') {
        this.router.navigate([""]);
      }
    }, 10000);
  }


  ngOnDestroy() {
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  }
}