Angular5组件类无重定向代码却仍被重定向问题求助

这问题我之前排查过类似的，大概率不是你组件里的代码直接导致的，咱们一步步拆解可能的原因和解决办法：

1. 先检查路由配置的隐性重定向 #

懒加载模块的路由配置里，很可能存在你没注意到的重定向规则，比如：

• 模块的根路由设置了默认重定向，比如：

const lazyRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' }, // 这条会影响所有子路由的初始匹配
  { path: 'confirm', component: ConfirmComponent },
  // 其他两个路由
];

如果你的confirm路由是作为这个懒加载模块的子路由，当访问confirm时，可能因为路由匹配优先级或者pathMatch设置不对，触发了根路由的重定向。建议检查整个懒加载模块的路由数组，确保没有多余的默认重定向，或者调整pathMatch的规则。

2. 排查NgRx Store的副作用 #

你在组件里触发了actions.Query()，这个action对应的Effect逻辑很可能偷偷做了路由导航。比如在effects文件里可能有这样的代码：

@Effect()
queryComplete$ = this.actions$.pipe(
  ofType(actions.QuerySuccess),
  tap((action) => {
    // 比如根据返回的交易状态判断，触发了重定向
    if (action.payload.payStat === 'FAILED') {
      this.router.navigate(['/payment/fail']);
    }
  })
);

你可以暂时注释掉this.store.dispatch(new actions.Query())这行代码，刷新页面看是否还会重定向。如果不重定向了，就去对应的effects里找这个action的处理逻辑，看看是不是有导航操作。

3. 检查路由守卫的影响 #

懒加载模块或者confirm路由本身可能配置了路由守卫（比如CanActivate、CanLoad），守卫里的逻辑可能在某些条件下触发了重定向。比如：

@Injectable()
export class TransactionGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    return this.store.select(fromStore.getSelectedTransaction).pipe(
      map(transaction => {
        if (!transaction) {
          this.router.navigate(['/transaction/list']);
          return false;
        }
        return true;
      })
    );
  }
}

去路由配置里看confirm路由有没有绑定这类守卫，或者整个懒加载模块有没有全局守卫。

4. 排查未贴全的组件逻辑或父组件影响 #

你贴的代码里if(this.transaction.payStat...后面的内容没写完，会不会后面跟着导航代码？比如：

if(this.transaction.payStatus === 'UNPAID') {
  this.router.navigate(['/payment']);
}

另外，父组件或者全局指令也可能监听路由参数变化或者Store状态变化，触发了重定向，这部分也可以排查一下。

快速排查技巧 #

• 打开浏览器开发者工具的Console，看有没有路由导航的日志（Angular路由默认会输出导航事件日志，开启调试模式更明显）。
• 如果装了NgRx DevTools，可以查看是否有RouterNavigated之类的action被触发，追踪它的触发源。

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