Angular点击父路由/orders时router-outlet子组件消失问题

问题原因 #

点击指向/orders的链接时，Angular会触发父路由的导航操作，此时子路由会被重置为空。而父组件的ngOnInit()仅在组件首次初始化时执行一次，后续导航到同一父路由不会再次触发该钩子，因此没有代码重新导航到对应的子路由，最终导致<router-outlet>中的内容消失。

解决方案 #

方案1：监听路由导航事件，动态触发子路由导航

将子路由导航逻辑抽离为独立方法，既在组件初始化时执行，也在每次导航到父路由时重新执行：

import { Router, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

// 父组件类内代码
ngOnInit() {
  // 初始加载时执行一次导航逻辑
  this.navigateToTargetChildRoute();

  // 监听导航结束事件，判断是否回到父路由，若是则重新导航
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    // 追踪到当前激活的最底层路由
    map(() => this.route),
    map(route => {
      while (route.firstChild) route = route.firstChild;
      return route;
    }),
    // 判断是否回到了父路由（子路由路径为空）
    filter(route => route.outlet === 'primary' && route.snapshot.url.length === 0)
  ).subscribe(() => {
    this.navigateToTargetChildRoute();
  });
}

private navigateToTargetChildRoute() {
  this.orderService.isOrderEligible()
    .pipe(take(1))
    .subscribe((isOrderEligible: boolean) => {
      // 使用相对路径导航，避免绝对路径的耦合问题
      const childPath = isOrderEligible ? 'store-products' : 'public-products';
      this.router.navigate([childPath], { 
        relativeTo: this.route,
        // 若不需要隐藏URL变化，可移除skipLocationChange
        skipLocationChange: true 
      });
    });
}

方案2：使用路由守卫（更优雅的路由层面解决方案）

通过CanActivateChild守卫，在每次访问子路由（包括父路由默认状态）时，动态重定向到符合条件的子路由：

1. 创建路由守卫：

import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { take, map } from 'rxjs/operators';
import { OrderService } from './order.service';

@Injectable({ providedIn: 'root' })
export class OrderChildRouteGuard implements CanActivateChild {
  constructor(
    private orderService: OrderService,
    private router: Router
  ) {}

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {
    return this.orderService.isOrderEligible().pipe(
      take(1),
      map(isEligible => {
        const targetPath = isEligible ? 'store-products' : 'public-products';
        // 如果当前子路由不是目标路由，则重定向
        if (route.url[0]?.path !== targetPath) {
          return this.router.createUrlTree([targetPath], { relativeTo: route.parent });
        }
        return true;
      })
    );
  }
}

2. 更新路由配置：

const routes: Routes = [
  {
    path: '',
    component: OrdersComponent,
    // 给父路由添加子路由守卫
    canActivateChild: [OrderChildRouteGuard],
    children: [
      {
        path: 'public-products',
        loadChildren: () => import('../orders/public-orders.module').then(m => m.PublicOrderModule),
      },
      {
        path: 'store-products',
        loadChildren: () => import('../orders/store-orders.module').then(m => m.StoreOrderModule),
      },
      // 空路径默认重定向（守卫会覆盖动态逻辑，这里仅作为 fallback）
      { path: '', redirectTo: 'public-products', pathMatch: 'full' }
    ]
  }
];

额外优化点 #

• 原代码中使用绝对路径['orders/public-products']导航存在耦合问题，建议改为相对路径+relativeTo: this.route，适配路由结构的变化。
• 若无需隐藏URL变化，可移除skipLocationChange: true，这样刷新页面时也能保持正确的子路由状态。

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