如何使用angular2的路由器实现面包屑 [英] how to implement breadcrumb using angular2's router

问题描述

我最近使用了 angular2 ，但不知道如何实现 readcrumb 组件，有谁能帮上忙？

 < div class = row style = padding-top：15px;> 
< ol class = breadcrumb> 
< li> a [如何？]< / a< / li> 
< li class = active>细节< / li> 
< / ol> 
< / div> 
  

解决方案

我也想使用 Breadcrumb 为我的项目，经过大量搜索后发现与 Breadcrumb 无关，因此决定
来创建我自己的。因此可以使用Bootflat样式（

I use angular2 recently, but don't know how to implement breadcrumb component, any one can help?

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

解决方案

well me too want to use Breadcrumb for my project and after searching alot found Nothing about Breadcrumb , so have decided to create my own. so by using bootflat styling (http://bootflat.github.io/documentation.html) i have created my own Breadcrumb for angular2 project. This Breadcrumb also support Routing in angular2. you just have to use these predefined components given here in the repo.

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

here is the code for using Breadcrum in HTML file:

<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>

hope this may help you and will useful for others too.

here is Demo for the Breadcrumb.

这篇关于如何使用angular2的路由器实现面包屑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！