Angular 5+如何获取子路由数据？咨询面包屑简易实现方法

一、获取子路由的title字段 #

你现在碰到的问题很典型：父组件AdminComponent里用this.route.snapshot.data.title只能拿到当前组件对应路由（也就是/admin）的配置数据，子路由的data并不会自动同步到父组件的路由快照里。想要拿到子路由的Organisation标题，这里有两种实用方案：

方式1：监听路由变化，遍历激活路由树 #

通过监听路由导航完成事件，从路由根节点开始遍历到当前激活的所有路由节点，就能拿到最底层子路由的title。代码实现如下：

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

export class AdminComponent implements OnInit {
  currentTitle: string = "";

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

  ngOnInit() {
    // 监听导航完成事件，实时更新标题
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      let currentRoute = this.route.root;
      // 一直找到最底层的激活路由
      while (currentRoute.firstChild) {
        currentRoute = currentRoute.firstChild;
      }
      // 如果子路由有title就用子路由的，否则 fallback 到父路由
      this.currentTitle = currentRoute.snapshot.data['title'] || this.route.snapshot.data['title'];
    });

    // 初始化时先获取一次标题
    let initRoute = this.route.root;
    while (initRoute.firstChild) {
      initRoute = initRoute.firstChild;
    }
    this.currentTitle = initRoute.snapshot.data['title'] || this.route.snapshot.data['title'];
  }
}

这样访问/admin/organisation时，就能拿到子路由的Organisation标题；如果没有子路由，就自动显示父路由的Admin标题。

方式2：子组件主动传递标题到父组件（适合简单场景） #

如果你的路由层级不多，也可以让子组件通过@Output事件把标题传给父组件：

// ListOrganizationComponent.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-list-organisation',
  templateUrl: './list-organisation.component.html',
  styleUrls: ['./list-organisation.component.css']
})
export class ListOrganizationComponent implements OnInit {
  @Output() titleChanged = new EventEmitter<string>();

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.titleChanged.emit(this.route.snapshot.data['title']);
  }
}

然后在AdminComponent的模板里监听这个事件：

<router-outlet (titleChanged)="currentTitle = $event"></router-outlet>

这种方式实现简单，但路由复杂时不如第一种方法通用。

二、Angular制作面包屑的简便方法 #

最省心的方式是封装一个通用面包屑组件，利用Angular的Router和ActivatedRoute服务自动收集路由链上的所有title，动态生成面包屑导航。

步骤1：创建面包屑组件 #

// breadcrumb.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

// 定义面包屑数据结构
interface Breadcrumb {
  label: string;
  url: string;
}

@Component({
  selector: 'app-breadcrumb',
  template: `
    <nav class="breadcrumb-container">
      <a *ngFor="let crumb of breadcrumbs; let last = last" 
         [routerLink]="crumb.url"
         class="breadcrumb-item"
         [class.active]="last">
        {{ crumb.label }}
      </a>
    </nav>
  `,
  styles: [`
    .breadcrumb-container { display: flex; gap: 10px; padding: 12px 0; align-items: center; }
    .breadcrumb-item { color: #0d6efd; text-decoration: none; }
    .breadcrumb-item.active { color: #6c757d; pointer-events: none; }
    .breadcrumb-item:not(:last-child):after { content: '/'; margin-left: 10px; color: #6c757d; }
  `]
})
export class BreadcrumbComponent implements OnInit {
  breadcrumbs: Breadcrumb[] = [];

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

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

  // 递归遍历路由树，构建面包屑数组
  private buildBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: Breadcrumb[] = []): Breadcrumb[] {
    const label = route.snapshot.data['title'] || route.snapshot.routeConfig?.path || '';
    const currentUrl = `${url}${route.snapshot.url.map(segment => segment.path).join('/')}`;

    // 只有当有标题时才添加到面包屑
    if (label) {
      breadcrumbs.push({ label, url: currentUrl || '/' });
    }

    // 递归处理子路由
    if (route.firstChild) {
      return this.buildBreadcrumbs(route.firstChild, `${currentUrl}/`, breadcrumbs);
    }

    return breadcrumbs;
  }
}

步骤2：完善路由配置的title字段 #

确保每个需要显示在面包屑的路由都配置data.title：

export const appRoutes: Routes = [
  { path: 'home', component: HomeComponent, data: { title: "Home" } },
  { path: 'help', component: HelpComponent, data: { title: "Help" } },
  { 
    path: 'admin', 
    component: AdminComponent, 
    runGuardsAndResolvers: 'always', 
    data: { title: "Admin"}, 
    canActivate: [AuthGuard], 
    children: [ 
      { 
        path: 'organisation', 
        component: ListOrganizationComponent, 
        data:{title: "Organisation"}, 
        resolve: {organizations: ListOrganizationResolver} 
      } 
    ] 
  }, 
  { path: '**', redirectTo: 'home', pathMatch: 'full' }, 
];

步骤3：在项目中使用面包屑组件 #

比如在根组件app.component.html里添加：

<app-breadcrumb></app-breadcrumb>
<router-outlet></router-outlet>

这样访问/admin/organisation时，面包屑会自动显示Home > Admin > Organisation，点击每个面包屑还能直接跳转到对应路由。后续新增路由时，只要加上data.title，面包屑就会自动更新，完全不用手动维护。

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