Angular 2动态面包屑

Question

我需要一些面包屑的帮助

这里是示例路由配置

Routes = [  
    {path: '', redirectTo: 'home', pathMatch: 'full'},  
    {path: 'home', ..., data: { breadcrumb: 'Home'}},  
    {path: 'about', ..., data: { breadcrumb: 'About'}},  
    {path: 'github', ..., data: { breadcrumb: 'GitHub'},
    {
       path: 'category/:id',
       component: CategoryComponent
    },  
]

在面包屑组件中，我尝试使用它从ActivatedRoute中提取面包屑数据

ngOnInit() {
   // subscribe to the NavigationEnd event
   this.router.events.filter((event) => event instanceof NavigationEnd).subscribe(() => {

      // set breadcrumbs
      const root: ActivatedRoute = this.activatedRoute.root;
      this.breadcrumbs = this.getBreadcrumbs(root);
   });
 }

之后我渲染了comonentns模板

<ul class="breadcrumb">
   <li><a routerLink="" routerLinkActive="active"><i class="fa fa-home position-left"></i> Главная</a></li>
   <ng-container *ngFor="let breadcrumb of breadcrumbs">
   <li routerLinkActive="active">
      <a [routerLink]="[breadcrumb.url, breadcrumb.params]"> {{ breadcrumb.label }}</a>
   </li>
   </ng-container>
</ul>

一切都很好，但我不知道我怎么能从category/:id路线的另一个组件传递数据值为人类可读的像“手机”

Answer 1

我希望现在回答这个问题还为时不晚：D，所以这里是一个有两个面包屑实现的CodeSandbox工作示例，它使用router data选项来传递和收集面包屑的数据。

代码说明：

查看痕迹导航组件内的注释。

Here is the breacrumb component

import { Component, OnInit } from "@angular/core";
import {
  Router,
  Event,
  ActivationStart,
  ActivatedRouteSnapshot,
  ActivationEnd,
  NavigationEnd,
  NavigationStart
} from "@angular/router";
import { filter, map, buffer, pluck } from "rxjs/operators";

/**
 * Check if an angular router 'Event' is instance of 'NavigationEnd' event
 */
const isNavigationEnd = (ev: Event) => ev instanceof NavigationEnd;
/**
 * Check if an angular router 'Event' is instance of 'NavigationEnd' event
 */
const isActivationEnd = (ev: Event) => ev instanceof ActivationEnd;

@Component({
  selector: "app-breadcrumb",
  templateUrl: "./breadcrumb.component.html",
  styleUrls: ["./breadcrumb.component.scss"]
})
export class BreadcrumbComponent implements OnInit {
  bcLoadedData;
  bcForDisplay;

  constructor(private router: Router) {}

  ngOnInit() {
    /**
     * navigationEnd$ is trigered once per completed routing event, in other words
     * once per loading a component that is in the end of the current route
     */
    const navigationEnd$ = this.router.events.pipe(filter(isNavigationEnd));

    /**
     * Here we subscribe to all navigation events, in order to update
     * our route "data", which we will use for the breadcrumb visualization.
     *
     * Than we filter the events emitted from the `router` in such way, that we are only
     * taking action upon a completed router event (in other words we are subscribing only for `ActivationEnd`
     * events)
     *
     * We use pluck to get only the requried bredcrumb data
     *
     * The buffer operator accumulates all `data` coming from the router and emmits the accumulated data once
     * when a `NavigationEnd` event passes troufh `navigationEnd$`
     *
     * The `map` in the end is used to reverse the collected data, in order to convert it to more logical
     * sequence. Without the revers first we will get the data for the current route, after that for it's parent
     * and so on (that is how the ng router works).
     */
    this.router.events
      .pipe(
        filter(isActivationEnd),
        pluck("snapshot"),
        pluck("data"),
        buffer(navigationEnd$),
        map((bcData: any[]) => bcData.reverse())
      )
      .subscribe(x => {
        this.bcLoadedData = x;
      });
  }
}

.breadcrumb {
    display: flex;

    &.simple {
        border: 2px solid blueviolet;
        border-radius: 4px;
    }

    .breadcrumb-separator {
        margin: 10px;
    }
}

<div class="breadcrumb simple">
    <div *ngFor="let bcElement of bcLoadedData; let last = last">
        {{bcElement.bc}}
        <span class="breadcrumb-separator"
              *ngIf="!last">></span>
    </div>
</div>

Here is the structure of the routes

const routes: Routes = [
	{ path: '', pathMatch: 'full', component: MockComponentComponent, data: { bc: 'Looking outside' } },
	{
		path: 'home', component: MockComponentComponent,
		data: { bc: 'I see a home' },
		children: [
			{
				path: 'primaryHouse', component: MockComponentComponent,
				data: { bc: 'I\'m going inside the home' },
				children: [
					{
						path: 'kitchen', component: MockComponentComponent,
						data: { bc: 'look inside the kitchen' }
					},
					{
						path: 'bedroom', component: MockComponentComponent,
						data: { bc: 'look inside the bedroom' }
					}
				]
			},
			{
				path: 'guestHouse', component: MockComponentComponent,
				data: { bc: 'I\'m going in the back yard' }
			}
		]
	}
];

Answer 2

任何面包屑解决方案都必须处理

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

我创建了一个库来处理所有这些叫做xng-breadcrumbs的问题 - https://github.com/udayvunnam/xng-breadcrumb

随意检查，An Angular应用程序开发显示面包屑的使用 - https://xng-breadcrumb.netlify.com