Javascript 角度-导航前等待服务完成

我试图在服务中设置数据，然后在数据填充到服务中后导航，我遇到了一个时间问题，即页面在服务能够填充之前导航

我在服务中有以下代码

addToken(token) {
  this.cookieService.set( 'token', token );
}

单击按钮时显示以下代码：-

this.token.addToken(res);
this.router.navigate(['/admin']);

一旦触发路由器，/admin页面将触发具有以下标题的端点：-

authHttpHeaders = new HttpHeaders({
    'Authorization': 'Bearer ' + this.token.getToken(),
    'Content-Type' : 'application/json',
    'Cache-Control': 'no-cache'
});

getToken（）函数只是从cookie接收令牌：-

getToken() {
  return this.cookieService.get('token');
}

如何确保在触发路由器导航之前完成addToken（）

我知道我可以通过设置超时来实现，但我真的不喜欢这样做

我更希望在导航路由器被触发之前，有某种形式的可观察性，或者有一种方式可以看到令牌in不等于null或空

---

提前感谢您的帮助。

返回一个observable，以便您可以订阅它并等待服务结束，并在令牌错误时过滤响应以取消

addToken（令牌）{
this.cookieService.set（'token'，token）；
归还（代币）；
}

this.token.addToken（res）
.pipe（过滤器（res=>！！res））
.订阅（（）=>{
this.router.navigate（['/admin']）；
});

返回一个observable，以便您可以订阅它并等待服务结束，并在令牌无效时过滤响应以取消

addToken（令牌）{
this.cookieService.set（'token'，token）；
归还（代币）；
}

this.token.addToken（res）
.pipe（过滤器（res=>！！res））
.订阅（（）=>{
this.router.navigate（['/admin']）；
});

您是否考虑过使用承诺？代码中的异步是什么？这种模式似乎很奇怪，通常您先导航，然后加载数据。数据是否会更改您导航到的位置或导航时显示的内容？奇怪，因为您单击时的函数和两个调用是同步的。。。（除了导航函数本身）您考虑过使用承诺吗？代码中什么是异步的？这种模式似乎很奇怪，通常您先导航，然后加载数据。数据是否会更改您导航到的位置或导航时显示的内容？奇怪，因为您单击时的函数和两个调用是同步的。。。（除了导航功能本身）@Faisal请自己回答，不要修改我的答案。如果我没有谈论承诺，我有我的理由。我编辑了你的，因为我认为没有必要添加另一个答案，无论如何，忘了它。这非常有效，谢谢你，但我得到了以下错误，阴影名称：“res”（无阴影变量）。有办法解决这个问题吗？@AngularDeveloper

filter（response=>！！response）

willdo@Faisal承诺不允许管道和过滤空结果。即使是这样，您也可以使用Promise原型的解析方法，而不是返回

新承诺

，该方法更清晰、更易于阅读：

返回承诺。解析（令牌）

@Faisal请您自己回答，而不是修改我的答案。如果我没有谈论承诺，我有我的理由。我编辑了你的，因为我认为没有必要添加另一个答案，无论如何，忘了它。这非常有效，谢谢你，但我得到了以下错误，阴影名称：“res”（无阴影变量）。有办法解决这个问题吗？@AngularDeveloper

filter（response=>！！response）

willdo@Faisal承诺不允许管道和过滤空结果。即使它返回了，您也可以使用Promise原型的解析方法，而不是返回

new Promise

，该方法更清晰、更容易阅读：

return Promise.resolve（token）

。