解决依赖afterRender初始化服务的Angular路由守卫阻塞问题

守卫会在路由激活阶段优先执行，但你的MyService依赖afterRender钩子初始化状态——这个钩子要等到组件开始渲染才会触发。这就导致守卫监听的state$一直停留在loading状态，管道里的filter始终不通过，Observable无法完成，最终引发页面渲染超时错误。

方案一：修改服务初始化逻辑（推荐） #

直接通过平台判断在客户端构造服务时读取localStorage，不需要依赖afterRender，从根源解决时机不匹配的问题。

修改后的MyService：

import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { BehaviorSubject } from 'rxjs';

export type MyState = 'loading' | 'valid' | 'unavailable';
const _myKey = 'my-state-key';

@Injectable({ providedIn: 'root' })
export class MyService {
  private _state$ = new BehaviorSubject<MyState>('loading');
  private isInitialized = false;

  public get state$() {
    return this._state$.asObservable();
  }

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this._init();
  }

  private _init() {
    // 仅在客户端环境执行初始化
    if (isPlatformBrowser(this.platformId)) {
      this._updateState();
    }
  }

  private _updateState() {
    // 避免重复初始化
    if (this.isInitialized) return;
    const val = localStorage.getItem(_myKey) as MyState || 'unavailable';
    this._state$.next(val);
    this.isInitialized = true;
  }
}

方案二：守卫中手动触发服务初始化 #

如果必须保留afterRender，可以给服务添加公共初始化方法，让守卫主动触发状态更新，确保state$能发出非loading的值。

修改MyService #

import { Injectable, afterRender } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

export type MyState = 'loading' | 'valid' | 'unavailable';
const _myKey = 'my-state-key';

@Injectable({ providedIn: 'root' })
export class MyService {
  private _state$ = new BehaviorSubject<MyState>('loading');
  private isInitialized = false;

  public get state$() {
    return this._state$.asObservable();
  }

  constructor() {
    this._init();
  }

  private _init() {
    afterRender(() => {
      this._updateState();
    });
  }

  // 添加公共初始化方法
  public initState(): void {
    this._updateState();
  }

  private _updateState() {
    if (this.isInitialized) return;
    const val = localStorage.getItem(_myKey) as MyState || 'unavailable';
    this._state$.next(val);
    this.isInitialized = true;
  }
}

修改MyGuard #

import { CanActivateFn, inject } from '@angular/router';
import { filter, take, map } from 'rxjs/operators';

export const myGuard: CanActivateFn = (route, state) => {
  const service = inject(MyService);
  const router = inject(Router);
  
  // 主动触发状态初始化
  service.initState();

  return service.state$.pipe(
    filter(value => value !== 'loading'),
    take(1),
    map(val => {
      const isValid = val === 'valid';
      if (!isValid) {
        router.navigate(['codeValidation']);
      }
      return isValid;
    })
  );
};

方案三：添加超时处理（应急方案） #

如果以上方案无法实施，可以给守卫的Observable添加超时逻辑，避免页面超时错误（仅为临时妥协，未解决根本问题）：

import { CanActivateFn, inject } from '@angular/router';
import { filter, take, map, timeout, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

export const myGuard: CanActivateFn = (route, state) => {
  const service = inject(MyService);
  const router = inject(Router);

  return service.state$.pipe(
    filter(value => value !== 'loading'),
    take(1),
    timeout(3000), // 设置3秒超时阈值
    catchError(() => {
      router.navigate(['codeValidation']);
      return of(false);
    }),
    map(val => {
      const isValid = val === 'valid';
      if (!isValid) {
        router.navigate(['codeValidation']);
      }
      return isValid;
    })
  );
};

内容的提问来源于stack exchange，提问作者hman_codes