如何在Angular 6上制作面包屑答案

【问题标题】：How to make breadcrumb on Angular 6如何在Angular 6上制作面包屑
【发布时间】：2019-01-29 22:10:57
【问题描述】：

我尝试使用 Angular 6 制作面包屑。文本有效，但链接无法正常工作。

我想这样做。

主页 > 仪表板 > 统计（有效。）

首页 -> xxx.com（有效。）

Dashborad -> xxx.com/dashboard（有效。）

统计 -> xxx.com/statistical（不起作用。）

所以，如果是子组件链接不起作用。

必须是 xxx.com/dashboard/statistical（正确）

我该怎么做？

breadcrumb.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent implements OnInit {
  route: string;
  breadcrumbList: Array<any>;
  routeLinks: number;
  count: number;

  constructor(location: Location, router: Router) {
    router.events.subscribe((val) => {
      if (location.path() !== '') {
        this.route = location.path();
        this.breadcrumbList = this.route.split('/');
        this.count = this.breadcrumbList.length;
      } else {
        this.route = 'Home';
      }
    });
  }

  ngOnInit() {}
}

breadcrumb.component.html

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <ng-container *ngIf="count == null">
      <li class="breadcrumb-item"><i class="material-icons">home</i></li>
    </ng-container>

    <ng-container *ngIf="count != null">
      <li class="breadcrumb-item"><a href="javascript:void(0)" [routerLink]=""><i class="material-icons">home</i></a></li>
    </ng-container>

    <ng-container *ngFor="let breadLink of breadcrumbList">
        <li class="breadcrumb-item"><a href="javascript:void(0)" [routerLink]="breadcrumbList[2]">{{breadLink}}</a></li>
    </ng-container>
  </ol>
</nav>

【问题讨论】：

我没有检查任何文章，但我无法确定 angular2 项目的最佳和合适的动态面包屑。最后，我为动态面包屑编写了一个非常简单的 Angular npm 模块。请参考以下 URL 并集成到您的应用程序中。 npmjs.com/package/ng-dynamic-breadcrumb
这可能会对您有所帮助。 angular-breadcrumb-demo

标签： javascript typescript angular6 breadcrumbs

【解决方案1】：

你必须重建每个 url 链接，并以以前的 url 为前缀 -

    this.breadcrumbList = this.route.split('/');
    this.breadcrumbLinksList  = [this.breadcrumbList[0]];

    for(let i=1; i<=this.breadcrumbList.length; i++){
      const link = this.breadcrumbLinksList[i-1] +'/'+ this.breadcrumbList[i]
      this.breadcrumbLinksList.push(link)
    }

在 html 中用作 -

<ng-container *ngFor="let breadcrumbLabel of breadcrumbList; let i=index">
    <li class="breadcrumb-item">
      <a [routerLink]="breadcrumbLinksList[i]">{{breadcrumbLabel}}</a>
    </li>
</ng-container>

为了更详细地使用面包屑，我认为 xng-breadcrumb (https://github.com/udayvunnam/xng-breadcrumb) 涵盖了您的所有用例以及一些其他有用的功能。任何面包屑解决方案都必须处理

在动态路由中定义面包屑的声明式方法
以异步方式更新任何路由，通过不同的标签方式跳过
在面包屑中显示的特定路线

随时检查面包屑在生产就绪的 Angular 应用程序中的使用情况https://xng-breadcrumb.netlify.com

【讨论】：