ionic 面包屑导航

1、bread-crumb.ts文件

  在 ionic 中 NavController 是导航控制组件的基础类，在面包屑导航中将使用该对象实例的 length()、remove(startIndex, removeCount, opts)、push(page, params, opts)方法：

length(): 返回该导航控制器的视图数量。
remove(startIndex, removeCount, opts)：从导航堆栈中的指定索引处移除 removeCount 个页面
（该移除是移除索引后面页面，所以研移除多个页面要将该索引移动到 length()-removeCount 处）
push(page, params, opts)：将页面压进当前导航堆栈顶部

源码：

import { Component, Input} from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'bread-crumb',
  templateUrl: 'bread-crumb.html',
})
export class BreadCrumb {

  @Input() private nextPage; // 下一个页面
  @Input() private curPageId;  // 当前页面ID
  constructor(  public navCtrl: NavController) {}


  /*
  * 面包屑导航控制
  */
  navClick(event){
    let dif = this.curPageId - event.target.id;
     if( dif > 0 ){
        this.navCtrl.remove(this.navCtrl.length() - dif, dif);
     } else if (dif === -1 && this.nextPage){
       this.navCtrl.push(this.nextPage);
     }

  }
}

2、bread-crumb.html文件

<div class="nav-container" >
  <span [ngClass]="{'curPage': curPageId === 1 }" class="center-y nav-control-1" id=1 (click)="navClick($event)">页面1</span>
  <span [ngClass]="{'curPage': curPageId === 2 }" class="center-y nav-control-2" id=2 (click)="navClick($event)">页面2</span>
  <span [ngClass]="{'curPage': curPageId === 3 }" class="center-y nav-control-3" id=3 (click)="navClick($event)">页面3</span>
  <span [ngClass]="{'curPage': curPageId === 4 }" class="center-y nav-control-4" id=4 (click)="navClick($event)">页面4</span>
  <span [ngClass]="{'curPage': curPageId === 5 }" class="center-y nav-control-5" id=5 (click)="navClick($event)">页面5</span>
</div>

3、bread-crumb.scss文件

.nav-container{
  position: relative;
  width: 100%;
  min-height: 40px;
  background: #ccc;

}

.nav-container > span {
  position: absolute;
  width: 20%;
  min-height: 40px;
  line-height: 40px;;

}

.nav-container > span{
  z-index: 10;
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
}

.nav-control-1{
  left: 0;
}
.nav-control-2{
  left: 20%;
}
.nav-control-3{
  left: 40%;

}
.nav-control-4{
  left: 60%;
}
.nav-control-5{
  left: 80%;
}
.curPage{
  color: black !important;
}