Angular 17中router.navigate首次点击偶尔失效问题求助

大家好，我遇到了一个很诡异的Angular路由问题，想请教下各位同行！

我开发的Angular应用有两个页面：一个带表单的录入页，另一个是结果展示页。我在录入页放了个按钮，点击后本该跳转到结果页，但有时候首次点击router.navigate完全没反应，必须点第二次才能成功跳转，这个问题是随机出现的，实在让人头大。

我本来抱着试试的心态加了setTimeout（理想情况不想用定时器），但就算加了500ms延迟，还是偶尔会出现首次点击失效的情况。

下面是我的相关代码：

组件中的跳转函数 #

public goToResults() {
  if (this.form.valid) {
    setTimeout(() =>
      this.router.navigate(["resultados/es"])
    , 500);
  } else {
    this.showErrors = true;
  }
}

路由配置文件（app.routes） #

export const routes: Routes = [
  { path: 'datos/:lang', component: UserDataComponent },
  { path: 'resultados/:lang', component: ResultsComponent, canActivate: [ReloadGuardService] },
  { path: '**', redirectTo: '/datos/es', pathMatch: 'full' }
];

我已经做了调试：只要表单验证通过，每次点击按钮都会进入setTimeout执行navigate那行代码，但就是偶尔跳转不成功，控制台也没有任何报错信息。

有没有大佬遇到过类似的问题？能帮我分析下可能是什么原因吗？提前感谢大家！

备注：内容来源于stack exchange，提问作者Alberto Camino