Angular 面包屑导航

最新推荐文章于 2025-06-12 15:25:20 发布

qq_22792923

最新推荐文章于 2025-06-12 15:25:20 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： Angular

本文链接：https://blog.youkuaiyun.com/qq_22792923/article/details/79883575

本文介绍了一个基于 Angular 和 NG-ZORRO 框架实现动态面包屑导航的方法，通过监听路由变化来更新面包屑组件显示的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考demo：https://plnkr.co/edit/UOcylJ5noqfRCL7ULJeJ?p=preview。
1.html文件--基于NG-ZORRO框架
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a>主页</a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item *ngFor="let breadcrumb of breadcrumbs">
    <a [routerLink]="[breadcrumb.url,breadcrumb.params]">{{breadcrumb.label}}</a>
  </nz-breadcrumb-item>
</nz-breadcrumb>

2.逻辑代码
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Router, ParamMap, Params, NavigationEnd, PRIMARY_OUTLET } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/filter';
interface IBreadcrumb {
  label: string;
  params?: Params;
  url: string;
}
@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.css']
})
export class BreadcrumbComponent implements OnInit {

  breadcrumbs: IBreadcrumb[];
  constructor(
    public activatedRoute: ActivatedRoute,
    private router: Router
  ) {
    this.breadcrumbs = [];
  }

  ngOnInit() {
    // const ROUTE_DATA_BREADCRUMB = 'breadcrumb';
    const ROUTE_DATA_BREADCRUMB = 'title';
    this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
      let root: ActivatedRoute = this.activatedRoute.root;
      this.breadcrumbs = this.getBreadcrumbs(root);
    });
  }
  private getBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: IBreadcrumb[] = []): IBreadcrumb[] {
    const ROUTE_DATA_BREADCRUMB = 'title';

    // 获取子路由
    let children: ActivatedRoute[] = route.children;

    // 如果没有子路由
    if (children.length === 0) {
      return breadcrumbs;
    }

    // 循环每个子路由
    for (let child of children) {
      // verify primary route
      if (child.outlet !== PRIMARY_OUTLET) {
        continue;
      }

      // verify the custom data property "breadcrumb" is specified on the route
      if (!child.snapshot.data.hasOwnProperty(ROUTE_DATA_BREADCRUMB)) {
        return this.getBreadcrumbs(child, url, breadcrumbs);
      }

      // get the route's URL segment
      let routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');

      // append route URL to URL
      url += `/${routeURL}`;

      // add breadcrumb
      let breadcrumb: IBreadcrumb = {
        label: child.snapshot.data[ROUTE_DATA_BREADCRUMB],
        params: child.snapshot.params,
        url: url
      };
      breadcrumbs.push(breadcrumb);

      // recursive
      return this.getBreadcrumbs(child, url, breadcrumbs);
    }

    // we should never get here, but just in case
    return breadcrumbs;
  }
}