如何使用angular2的路由器实现面包屑

Question

我最近使用angular2，但不知道如何实施breadcrumb组件，任何人都可以提供帮助吗？

<div class="row" style="padding-top:15px;">
   <ol class="breadcrumb">
      <li><a [how to?]>home</a></li>
      <li class="active">detail</li>
   </ol>
 </div>

Answer 1

目前似乎不太容易 有一个未解决的问题可以支持此用例https://github.com/angular/angular/issues/5318

Answer 2

我也非常想在我的项目中使用Breadcrumb，在搜索了很多关于Breadcrumb的内容之后，所以决定了 创造我自己的。所以通过使用bootflat样式（http://bootflat.github.io/documentation.html），我创建了自己的Breadcrumb 对于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>

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

这是面包屑的演示。