title: reuse-tab

subtitle: 路由复用标签

module: ReuseTabModule

**latest版本： **

安装方式

npm i --save ng-reuse-tab

默认 ReuseTabModule 并不会注册 RouteReuseStrategy，除了引入模块以外，还需要在 手动注册 RouteReuseStrategy。

app.module.ts

providers: [

 {

  provide: RouteReuseStrategy,

  useClass: ReuseTabStrategy,

  deps: [ReuseTabService],

 }

]

组件使用（在适当位置，一般是app.component.html中使用标签）：

changeIndex:页面title是否显示为当前tab名（默认为:true）

change:切换页面时，当前地址及父级地址返回（currentUrl,parentUrl)

<reuse-tab [menus]="menus" [changeIndex]="false" (change)="selectPage($event)"></reuse-tab>

传入 menus 路由json

//简单粗暴使用
export const Menus = [
    {
      name: "项目管理",
      path: '/project'
    },
    ...
];
//也支持树结构(这里是为了同时拿来遍历菜单列表)，如下：
export const Menus = [
    {
      name: "项目管理",
      icon: "appstore",
      img: "img base64",//未选中tab时图片显示
      selectImg: "img base64",//已选中tab时图片显示
      canClose: false, //是否可关闭（一般用于主页）
      path: '/project'
    },
    {
        name: "模型开发",
        icon: "user",
        children: [
          {
            name: "创建训练任务",
            path: "/dev/train"
          },
          {
            name: "模型任务管理",
            path: "/dev/task"
          }
        ]
      }
    {
      icon: "appstore",
      path: '/settings/staff'
    }
    
  ]

若有路由不需要复用，可在路由配置中加入 :

data:{
    useCache:false //不加则都复用
}

为了方便加入 onReuseInit 与 onReuseDestroy 生命周期。

插件使用了ngZorro中的tab模块，当数量过多是会自动显现左右拉横条，并在最左侧加入slot，<ng-content select="[name=left-flod"></ng-content>，加入右侧slot，<ng-content select="[name=right-flod"></ng-content>

应用场景一（折叠展开菜单项目）：

<reuse-tab [menus]="menus" (change)="selectPage($event)">
    <div name="left-slot" class="fold-div" (click)="isCollapsed = !isCollapsed"><i nz-icon [ngClass]="{'fold':isCollapsed}"
      nzType="menu-fold" nzTheme="outline"></i></div>
</reuse-tab>

插件加入了 页面切换 时的回调 应用场景一（切换tab时，左侧菜单项目对应打开并选中高亮）：

调用界面

//拿到路由并高亮菜单栏
selectPage(route){
  this.currentUrl = route.currentUrl;
  this.parentUrl = route.parentUrl;
}