CanActivate Guard似乎沒有訂閱可觀察的內容

Question

我有一個角度應用程序，它需要完成許多步驟。 每個步驟只能執行一次，並且必須完成所有先前的步驟。 為了達到這個目的，我在每條路線上都增加了路線防護。 該應用程序在啟動時發出http請求以檢查狀態。 但是，路由防護的canActivate方法似乎並未訂閱更改。

在下面的示例中， statusService更新狀態，這將觸發防護中的更新。

statusService

@Injectable({
  providedIn: 'root'
})
export class StatusService {

  private stepOneComplete: BehaviorSubject<boolean> = new BehaviorSubject(false);
  private stepTwoComplete: BehaviorSubject<boolean> = new BehaviorSubject(false);

  constructor(
    private http: HttpClient
  ) { }

  public getStepOneComplete(): Observable<boolean> {
    return this.stepOneComplete;
  };

  public updateStepOneComplete(newValue: boolean): void {
    this.stepOneComplete.next(newValue);
  };

  public initialize(): void {
    this.http.get(`${apiUrl}status`)
      .subscribe((data: any) => {
        this.stepOneComplete(data.stepOne);
      });
  };
};

stepOneGuard

@Injectable()
export class StepOneGuard implements CanActivate {

  constructor(
    private service: StatusService,
    private router: Router
  ) {}

  canActivate(): Observable<boolean> {
    return this.service.getStepOneComplete().pipe(
      tap(complete => {
        if(complete){
          this.router.navigate(['/step-two']);
        }
      }),
      map(complete => {
        return !complete;
      })
    );
  }
}

我希望發生的是，在initialize方法運行並更新stepOneComplete之后，路由器應導航至第二步。 但是，沒有導航發生。 如果將console.log放置在后衛的tap方法中，則它會在初始加載時觸發，但在stepOneComplete.next時不會stepOneComplete.next 。

Answer 1

我認為答案在這里：

public getStepOneComplete(): Observable<boolean> {
  return this.stepOneComplete.asObservable();
}

這就是我在自己的生產代碼中可以正常運行的內容。

Answer 2

您不應將后衛視為控制導航的單例。 其唯一目的是控制用戶是否可以訪問頁面。

我建議您有一個狀態服務來保存“向導”的狀態，然后您只需在每個警衛中檢查它即可。 您甚至根本不需要主題。