ng2-qbreadcrumb

ng2-qbreadrumb is a component for Angular

Demo

Install

You can get it on npm.

npm install ng-qbreadcrumb --save   vc 

Setup

You'll need to add BreadCrumbModule to your application module.

import { BreadcrumbsModule } from 'ng-qbreadcrumb';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BreadCrumbModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {
}

@Component({
  selector: 'sample',
  template:`
  <div>
    <app-breadcrumb [options]="breadCrumbOptions" #breadCrumb [ids]="ids" (rootClickEvent)="rootClickEvent($event)" (breadNodeClickEvent)="clickBreadcrumb($event)"></app-breadcrumb>
  </div>
  `
})
class Sample {}

Usage

import { Options as breadcrumbOption }  from 'ng-qbreadcrumb';

@Component({
  selector: 'sample',
  template:`
  <div>
    <app-breadcrumb [options]="breadCrumbOptions" #breadCrumb [ids]="ids" (rootClickEvent)="rootClickEvent($event)" (breadNodeClickEvent)="clickBreadcrumb($event)"></app-breadcrumb>
  </div>
  `
})
class Sample {
   breadCrumbOptions : breadcrumbOption = {
    keyId : 'r_object_id',    //property id for each breadcrumb node
    requestId : 'ids',        //request params id for backend api
    keyTitle : 'object_name', //which property to show of your data
    url:'api/breadcrumbs',    //request url
    additionalParam : {        
      customParams : 'helloWorld' //additional parameter to request,usage for user info
    },
    requestCallBack : res => res.data //do something after get response,should return the breadcrumb data,default is : res => res 
  }  
}

Directive

<app-breadcrumb [options]="breadCrumbOptions" #breadCrumb [ids]="ids" (rootClickEvent)="rootClickEvent($event)" (breadNodeClickEvent)="clickBreadcrumb($event)"></app-breadcrumb>

Input

| Property Name | Type | Description | | :-------------: |:-------------:| -----| | ids | Array | the breadcrumb component will watch ids's change and update data or send request | | options | Options | set your own breadcrumb option |

###Options

{  
    keyId : string;             //节点的objectId字段
    url : string;               //http请求的接口地址
    requestId? : string;        //请求的id对应的参数名
    keyTitle? : string;         //面包屑上显示的字段属性名
    method? : 'get' | 'post';       //请求的方法
    additionalParam? : any;  //额外需要添加的请求参数
    requestCallBack?(res : any) : any; //接口返回后的数据处理
}

Output

| Property Name | Type | Description | | :-------------: |:-------------:| -----| | rootClickEvent | Function | call this Function when user click root event,usage for when you set root node | | breadNodeClickEvent | Function | call this Function when user click breadcrumb node |

BreadcrumbService

This service exposes a few different methods with which you can interact with ng-qbreadcrumb.

BreadcrumbService.hideRoute(name: string)

hide a node which you do not want to show

BreadcrumbService.isRouteHidden(name: string)

check the node is hide or not

BreadcrumbService.setRootNode(name: Array<string> | string)

set root node/nodes for breadcrumb,can be the string for single root or Array

BreadcrumbService.getRootNodes()

get root of the breadcrumb