路线守卫不适用于2个可观察到的地方

Question

我写了route guard，如下所示。但是在else语句中，该语句永远不会返回结果。但这有结果。而且也没有错误。 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

首先，您需要像在图像中添加一样，在return前面添加this.hotelService....。然后，您需要使用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);
    }));
  }