Angular孙路由无法激活问题及路由与面包屑冲突解决

核心解决方案：无组件父路由维护层级 #

要同时满足「三个独立视图替换渲染」和「正确面包屑层级」的需求，需调整路由配置，用无组件的父路由保留路由层级关系，同时让所有视图组件都在根容器的router-outlet中渲染。

修正后的部署模块路由配置 #

export const DeploymentRoutes: Routes = [
  {
    path: '',
    component: DeploymentComponent,
    children: [
      // 部署列表页：根路径
      {
        path: '',
        component: ListDeploymentsComponent,
        data: { breadcrumb: { alias: 'deployments' } },
      },
      // 仅维护路由层级的父路由：无组件，负责传递面包屑数据
      {
        path: ':release',
        data: { breadcrumb: { alias: 'release' } },
        children: [
          // 发布详情页：对应 /deployments/:release
          {
            path: '',
            component: DeploymentDetailsComponent
          },
          // 任务详情页：对应 /deployments/:release/:jobId
          {
            path: ':jobId',
            component: JobDetailsComponent,
            data: { breadcrumb: { alias: 'job' } }
          }
        ]
      }
    ],
  },
];

跳转代码无需修改 #

之前的跳转逻辑可直接复用：

• 从列表页跳转到发布详情：

public viewDeploymentDetails(deployment: Deployment) {
   this.router.navigate([`./${deployment.release}`], { relativeTo: this.route});
}

• 从发布详情跳转到任务详情：

public viewJobDetails(job: Job) {
   this.router.navigate([`./${job.id}`], { relativeTo: this.route});
}

面包屑逻辑适配 #

路由恢复层级结构后，面包屑组件可通过遍历路由树的pathFromRoot生成正确层级导航，基础实现示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Observable, filter, map } from 'rxjs';

@Component({
  selector: 'app-breadcrumb',
  template: `
    <div class="breadcrumb">
      <a *ngFor="let crumb of breadcrumbs$ | async" [routerLink]="crumb.url">
        {{ crumb.label }}
      </a>
    </div>
  `
})
export class BreadcrumbComponent implements OnInit {
  breadcrumbs$: Observable<{ label: string; url: string }[]>;

  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnInit() {
    this.breadcrumbs$ = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.buildBreadcrumbs(this.route.root))
    );
  }

  private buildBreadcrumbs(route: ActivatedRoute, url = '', breadcrumbs: { label: string; url: string }[] = []): { label: string; url: string }[] {
    const childRoutes = route.children;
    if (!childRoutes.length) return breadcrumbs;

    for (const child of childRoutes) {
      const segmentUrl = child.snapshot.url.map(s => s.path).join('/');
      const fullUrl = url + (segmentUrl ? `/${segmentUrl}` : '');
      const breadcrumbData = child.snapshot.data?.breadcrumb;

      if (breadcrumbData) {
        breadcrumbs.push({ label: breadcrumbData.alias, url: fullUrl });
      }

      return this.buildBreadcrumbs(child, fullUrl, breadcrumbs);
    }

    return breadcrumbs;
  }
}

问题根源解析 #

1. 初始嵌套路由配置：将JobDetailsComponent作为DeploymentDetailsComponent的子路由，导致必须在后者中添加router-outlet才能渲染，形成嵌套视图，不符合需求。
2. 扁平路由配置：虽然实现了独立视图，但丢失了路由层级关系，面包屑组件无法识别父级路由节点，导致层级失效。
3. 无组件父路由的优势：既保留了deployments > :release > :jobId的层级结构（满足面包屑生成需求），又让所有视图组件都在DeploymentComponent的根router-outlet中替换渲染，实现独立视图效果。

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