路线守卫不适用于 2 个可观察对象

Question

我写了route guard如下图。但是在 else 语句中，这从来没有 return 结果。但它有一个结果。也没有错误。 this.hotelSettingsService.get().pipe(map(res => { if (res) {

如果我删除此 from(this.localStorageService.get(LocalStorage.SCROLL_VIEW_HOLDER)).pipe(map(path 部分，它会起作用。

我觉得我做错了根本性的事情。有什么线索吗？

有关此行为的视频： Video

 canActivate(): Observable<boolean> {

    return from(this.localStorageService.get(LocalStorage.SCROLL_VIEW_HOLDER)).pipe(map(path => {
      if (path) {
        this.router.navigate(path);
        return true;
      } else {
        this.hotelSettingsService.get().pipe(map(res => {
          if (res) { // not come to here
            this.router.navigate([this.getLandingPage(environment.hotelName)]);
            return true;
          }
        }), catchError((err) => {
          return of(false);
        }));
      }
    }), catchError((err) => {
      return of(false);
    }));
  }

当我输入 return:

这工作正常：

canActivate(): Observable<boolean> {

        return this.hotelSettingsService.get().pipe(map(res => {
              if (res) { 
                this.router.navigate([this.getLandingPage(environment.hotelName)]);
                return true;
              }
            }), catchError((err) => {
              return of(false);
            }));
          }
     }

Answer 1

首先，您需要在 this.hotelService.... 前面添加 return，就像您在图片中添加的一样。然后你需要使用 switchMap 而不是 map:

来展平结果

 canActivate(): Observable<boolean> {
    // since we have (possibly) an inner observable, flatten the result
    return from(...).pipe(switchMap(path => {
      if (path) {
        this.router.navigate(path);
        // return observable of
        return of(true);
      } else {
        return this.hotelSettingsService.get().pipe(map(res => {
          if (res) {
            this.router.navigate([this.getLandingPage(environment.hotelName)]);
            return true;
          }
        }), catchError((err) => {
          return of(false);
        }));
      }
    }), catchError((err) => {
      return of(false);
    }));
  }

路线守卫不适用于 2 个可观察对象

Route guard doesn't work with 2 observable

rxjs

typescript

angular

ionic4

angular7