Question

我正在努力解决这个问题：）

这个想法是有一个组件，当通过子视图导航时更新面包屑，例如：

<breadcrumb> Products / Category-C / My-Product </breadcrumb>

Products -> Category-A
         -> Category-B
         -> Category-C  
                  |-> My-Product

Answer 1

可能这不是最好的解决方案，但你可以使用RoutesRecognized路由器事件并遍历event.state._root childrens：

import {Injectable, EventEmitter} from '@angular/core';
import {Router, RoutesRecognized, ActivatedRouteSnapshot} from '@angular/router';

@Injectable()
export class BreadcrumbComponent {
public breadcrumbs:Array<any>;
constructor(private _router:Router) {

this._router.events.subscribe(eventData => {
  if (eventData instanceof RoutesRecognized) {
    let event:any = eventData;
    let currentUrlPart = event.state._root;
    let currUrl = '#'; //for HashLocationStrategy

    this.breadcrumbs = [];
    while (currentUrlPart.children.length > 0) {
      currentUrlPart = currentUrlPart.children[0];
      let routeSnaphot = <ActivatedRouteSnapshot>currentUrlPart.value;

      currUrl += '/' + routeSnaphot.url.map(function (item) {
          return item.path;
        }).join('/');

      this.breadcrumbs.push({
        displayName: (<any>routeSnaphot.data).displayName,
        url: currUrl,
        params: routeSnaphot.params
      })
       console.log(this.breadcrumbs)
    }               
  }
});
}}

路由配置如下所示：

export const AppRoutes:RouterConfig = [{
path: 'app',
component: App,
data: {
  displayName: 'Home'
},
children: [
  {

    data: {
      displayName: 'Pages'
    },
    path: 'pages',
    component: Pages,       
    children: [             
    ]
  }
]}]

使用Angular 2 RC4，@ angular / router 3.0.0-beta.1

进行测试

Answer 2

添加NullԀʇɹ的答案，您可以使用PrimeNG's breadcrumb动态创建面包屑。

您首先需要一个BreadcrumbService：

Observable.just(metaId).flatMap(docId -> 
    bucket.async()                             
    .upsert(JsonDocument.create(metaId, JsonObject.fromJson(docContent))))
    .toBlocking()
    .singleOrDefault(null);

然后在你的主要组件中，比如说AppComponent，注入你的BreadCrumbService，并在面包屑发生变化时告诉它，更新它：

import { EventEmitter, Injectable } from '@angular/core';

import { MenuModule, MenuItem } from 'primeng/primeng';

/**
 * A service provides functions to get and set the breadcrumb of the app
 */
@Injectable()
export class BreadcrumbService {
  items: MenuItem[] = [];

  public breadcrumbChanged: EventEmitter<MenuItem[]> = new EventEmitter<MenuItem[]>();

  getBreadcrumb(): MenuItem[] {
    return this.items;
  }

  setBreadcrumb(breadcrumb: MenuItem[]): void {
    this.items = breadcrumb;
    this.breadcrumbChanged.next(this.items);
  }

}

您的AppComponent的相应html应如下所示：

import { BreadcrumbService } from './breadcrumb.service';
import { BreadcrumbModule, MenuItem } from 'primeng/primeng';

@Component({
  selector: 'my-app',
  templateUrl: '/app.component.html',
})
export class AppComponent {
  breadcrumb: MenuItem[];

  constructor(private breadcrumbService: BreadcrumbService) {
    // whenever breadcrumb changes, update it
    this.breadcrumbService.breadcrumbChanged.subscribe(breadcrumb => { this.breadcrumb = breadcrumb });
  }
}

现在，您要在组件中动态创建面包屑，例如My-Product：

<p-breadcrumb [model]="breadcrumb"></p-breadcrumb>

Answer 3

使用bootflat主题我创建了自己的面包屑对于angular2项目。此Breadcrumb还支持angular2中的路由。你只需要使用这些预定义的组件在回购中给出。

https://github.com/MrPardeep/Angular2-DatePicker

这是在HTML文件中使用Breadcrum的代码：

<breadcrumb>
    <tab name="Home" icon="glyphicon glyphicon-home"></tab>
    <a [routerLink]="['/Components']">
        <tab name="Cutom Angular 2 Components" icon="glyphicon glyphicon-home"></tab>
    </a>
    <tab action="active" name="Datepicker" icon="glyphicon glyphicon-list-alt"></tab>
</breadcrumb>

希望这对你有所帮助，对其他人也有用。

这是面包屑的演示。

Answer 4

PrimeNG有一个Angular2面包屑组件。演示是：http://www.primefaces.org/primeng/#/breadcrumb

该产品仍处于测试阶段，我尚未尝试使用此产品，但它可能满足您的需求。

Answer 5

我认为xng-breadcrumb可以处理您的用例以及其他一些经过深思熟虑的用例

支持嵌套路由的默认路由
在路由配置中定义面包屑的声明性方法
动态异步方式来更新任何路由的面包屑
跳过显示在面包屑中的特定路线的方式

您可以检查-https://github.com/udayvunnam/xng-breadcrumb

演示面包屑用法的演示应用程序-https://xng-breadcrumb.netlify.com

导航嵌套组件时创建面包屑（Angular 2）

5 个答案: