如何在导航到新页面之前让 Angular 休眠 5 秒？

Question

快速提问，如何在导航到新页面之前让 Angular 休眠 5 秒？

我正在我的函数中尝试这个，但它似乎不起作用：

setTimeout(() => {
        console.log('sleep');
      }, 5000);
this.router.navigate(['/question', this.getQuestionID() + 1]);
...

Answer 1

发生这种情况是因为setTimeout不要阻止代码执行，而是调度回调函数执行。也就是说，您的导航调用在回调之外。这意味着它将在回调调度后立即运行，而不是在执行时运行。

正确的代码是：

setTimeout(() => {
  console.log('sleep');
  this.router.navigate(['/question', this.getQuestionID() + 1]);
  // And any other code that should run only after 5s
}, 5000);

笔记：

如果用户尝试在 tge 5s 之前使用一些角度路由器链接导航离开，它仍然会在 5s 后运行导航，从而导致奇怪的行为。

你不应该：

1. 取消路由变更超时；或者
2. 阻止整个页面以避免点击任何其他路线。