Angular+NGRX懒加载路由跨模块导航失效，陷入无限循环

核心问题根源 #

1. 未清理的订阅导致内存泄漏：组件初始化的所有订阅未在销毁时取消，导航后UserDetailComponent仍持有订阅，状态变更时反复触发导航逻辑，形成无限循环。
2. 时序问题：分开订阅状态与动作标识，可能出现状态先更新但动作标识未同步的情况，或导航后状态未重置导致重复触发。
3. 组件未正常销毁：若路由配置存在问题，导航后原组件未从路由树移除，持续监听状态变更。

具体修复步骤 #

1. 用takeUntil管理订阅，避免内存泄漏

给所有手动订阅添加销毁信号，确保组件销毁时自动取消订阅：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class UserDetailComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    // 交易动作标识订阅
    this.transactionStore.pipe(
      select(transactionActionSelector),
      takeUntil(this.destroy$)
    ).subscribe(action => {
      this.transactionLastActionResponse = action;
    });

    // 用户动作标识订阅
    this.store.pipe(
      select(actionSelector),
      takeUntil(this.destroy$)
    ).subscribe(action => {
      this.lastActionResponse = action;
    });

    // 交易状态订阅
    this.transaction$.pipe(
      takeUntil(this.destroy$)
    ).subscribe(transaction => {
      if (transaction && this.transactionLastActionResponse === TransactionActionEnum.OWNTRADE) {
        this.router.navigateByUrl('/transaction/confirmation');
        // 导航后重置动作标识，避免重复触发
        this.transactionStore.dispatch(resetTransactionAction());
      }
    });

    // 用户状态订阅
    this.item$.pipe(
      takeUntil(this.destroy$)
    ).subscribe(item => {
      if (item && this.lastActionResponse === UserActionEnum.FINDONE) {
        this.item = item;
      }
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

2. 合并状态订阅，解决时序问题

用combineLatest合并交易状态与动作标识的Observable，确保两者都就绪后再判断导航逻辑：

import { combineLatest } from 'rxjs';

// 替换原交易相关的两个订阅
combineLatest([
  this.transactionStore.pipe(select(transactionSelector)),
  this.transactionStore.pipe(select(transactionActionSelector))
]).pipe(
  takeUntil(this.destroy$)
).subscribe(([transaction, action]) => {
  if (transaction && action === TransactionActionEnum.OWNTRADE) {
    this.router.navigateByUrl('/transaction/confirmation');
    this.transactionStore.dispatch(resetTransactionAction());
  }
});

3. 重置NGRX状态，防止重复导航

在交易模块中添加重置动作与reducer逻辑，导航后清空触发导航的动作标识：

// 定义重置动作
export const resetTransactionAction = createAction(
  '[Transaction] Reset Last Successful Action'
);

// 在交易reducer中处理重置
on(resetTransactionAction, (state) => ({
  ...state,
  lastSuccessfulAction: null
}));

4. 检查组件销毁逻辑

确认用户模块路由配置正确，导航后UserDetailComponent会被从路由树移除：

// user.module.ts 路由示例
const routes: Routes = [
  { path: 'detail/:id', component: UserDetailComponent }
];

若组件仍未销毁，检查是否启用了路由复用策略或自定义守卫阻止了组件销毁。

5. 改用async管道减少手动订阅

尽量用Angular内置的async管道管理订阅，避免手动订阅出错：

<!-- 模板中使用async管道 -->
<div *ngIf="item$ | async as item">
  <!-- 使用item数据 -->
</div>

此方式会自动在组件销毁时取消订阅，无需手动处理。

关于item$持续触发的额外检查 #

• 确认用户模块reducer每次更新状态时都返回新对象，而非直接修改原state：

  // 错误示例：直接修改state
  on(userFindOneSuccess, (state, { res }) => {
    state.item = res;
    return state;
  });
  
  // 正确示例：返回新对象
  on(userFindOneSuccess, (state, { res }) => ({
    ...state,
    item: res
  }));
  

• 若用户状态存在频繁变更（如其他组件触发更新），组件未销毁时item$会持续发射值，需通过takeUntil确保组件销毁后停止监听。

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