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

Question

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

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

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

原文由 integral100x 发布，翻译遵循 CC BY-SA 4.0 许可协议

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. 阻止整个页面以避免点击任何其他路线。

原文由 Elias Soares 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果你想以最好的方式编写它，你应该使用 RXJS timer 运算符（ 文档）

 const subscription = timer(5000).subscribe(() => {
    this.router.navigate(['/question', this.getQuestionID() + 1]);
)};

也不要忘记取消订阅 ngOnDestroy 生命周期挂钩（ 文档）

 ngOnDestroy() {
   if (this.subscription) {
       this.subscription.unsubscribe();
   }
}

原文由 Roman Šimík 发布，翻译遵循 CC BY-SA 4.0 许可协议