Angular-導航之前等待服務完成

Question

我試圖在服務中設置數據，然后在服務中填充數據后進行導航，但是我遇到了計時問題，即頁面無法在服務能夠填充之前進行導航。

我在服務中有以下代碼

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（）已完成。

我知道我可以使用setTimeout實現它，但是我真的不喜歡這樣做。

我希望有某種可觀察的形式，或者是一種在觸發導航路由器之前可以看到令牌不等於null或空的方式。

在此先感謝您的幫助。

Answer 1

返回一個observable，以便您可以訂閱它並等待服務結束它的事情，並過濾響應以在令牌為假時取消。

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

this.token.addToken(res)
.pipe(filter(res => !!res))
.subscribe(() => {
  this.router.navigate(['/admin']);
});