From f7bc9403fbb28137b44f5a7c0e89cdb278082530 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=A4=E6=B5=B7=E9=B9=8F10210844?= Date: Tue, 8 Jan 2019 15:01:35 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E9=85=8D=E7=BD=AE=E6=97=A0=E5=B1=82=E7=BA=A7=E5=85=B3?= =?UTF-8?q?=E7=B3=BB=E7=9A=84=E8=B7=AF=E7=94=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I9d101cf30f817ae7bbc1043707b482822c86cc01 --- src/app/demo/breadcrumb/demo-set.module.ts | 30 ++++---------- .../breadcrumb/router/demo.component.html | 3 +- .../demo/breadcrumb/router/demo.component.ts | 41 ++++++++++++++++--- .../demo/breadcrumb/router/detail/detail.ts | 4 +- .../demo/breadcrumb/router/digital/digital.ts | 1 - .../demo/breadcrumb/router/fruits/fruits.ts | 7 ++-- .../demo/breadcrumb/router/product.service.ts | 18 +++++--- src/jigsaw/component/breadcrumb/breadcrumb.ts | 11 +++-- 8 files changed, 67 insertions(+), 48 deletions(-) diff --git a/src/app/demo/breadcrumb/demo-set.module.ts b/src/app/demo/breadcrumb/demo-set.module.ts index 46b4229419..8faecc96eb 100644 --- a/src/app/demo/breadcrumb/demo-set.module.ts +++ b/src/app/demo/breadcrumb/demo-set.module.ts @@ -17,30 +17,16 @@ export const routerConfig = [ path: 'router', component: BreadcrumbRouterDemoComponent, children: [ { - path: 'fruits', component: BreadcrumbRouterFruits, - children: [ - { - path: 'detail/:id', component: BreadcrumbRouterDetail, - children: [ - { - path: 'buy', component: BreadcrumbRouterBuy - } - ] - } - ] + path: 'fruits', component: BreadcrumbRouterFruits }, { - path: 'digital', component: BreadcrumbRouterDigital, - children: [ - { - path: ':id', component: BreadcrumbRouterDetail, - children: [ - { - path: 'buy', component: BreadcrumbRouterBuy - } - ] - } - ] + path: 'digital', component: BreadcrumbRouterDigital + }, + { + path: 'detail/:id', component: BreadcrumbRouterDetail + }, + { + path: 'buy/:id', component: BreadcrumbRouterBuy } ] } diff --git a/src/app/demo/breadcrumb/router/demo.component.html b/src/app/demo/breadcrumb/router/demo.component.html index a9bb8cb16f..b14c9d97f5 100644 --- a/src/app/demo/breadcrumb/router/demo.component.html +++ b/src/app/demo/breadcrumb/router/demo.component.html @@ -16,7 +16,6 @@

内页面包屑

简易路由

点击下面的超链切换路由，面包屑会根据路由自行设置面包屑路径。

-Fruits | -Digital +Fruits | Digital
diff --git a/src/app/demo/breadcrumb/router/demo.component.ts b/src/app/demo/breadcrumb/router/demo.component.ts index 7f386cf908..3d8526b5e1 100644 --- a/src/app/demo/breadcrumb/router/demo.component.ts +++ b/src/app/demo/breadcrumb/router/demo.component.ts @@ -27,17 +27,46 @@ export class BreadcrumbRouterDemoComponent { routes: BreadcrumbRouteConfig[] = [ {'breadcrumb/router': {label: 'Product List', icon: 'fa fa-list'}}, {'breadcrumb/router/fruits': {label: 'Fruits', icon: 'fa fa-lemon-o'}}, - {'breadcrumb/router/fruits/detail/*': this.detailBreadcrumbGenerator}, - {'breadcrumb/router/fruits/detail/*/buy': {label: 'Buy', icon: 'fa fa-shopping-cart'}}, {'breadcrumb/router/digital': {label: 'Digital', icon: 'fa fa-camera'}}, - {'breadcrumb/router/digital/*': this.detailBreadcrumbGenerator}, - {'breadcrumb/router/digital/*/buy': {label: 'Buy', icon: 'fa fa-shopping-cart'}} + {'breadcrumb/router/detail/*': this.detailBreadcrumbGenerator}, + {'breadcrumb/router/buy/*': this.buyBreadcrumbGenerator}, ]; - detailBreadcrumbGenerator(routeNode: string): BreadcrumbNode { - return {label: this.productService.getProductById(parseInt(routeNode)).name}; + detailBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { + const detail = this.productService.getProductById(parseInt(routeNode)); + return [ + this.getListNode(detail.type), // 自定义的节点写在前面，随便写会导致面包屑生成的位置不对 + {label: detail.name} + ]; }; + buyBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { + const detail = this.productService.getProductById(parseInt(routeNode)); + return [ + this.getListNode(detail.type), + this.getDetailNode(detail), + {label: 'Buy', icon: 'fa fa-shopping-cart'} + ]; + } + + getDetailNode(detail) { + return {label: detail.name, routeLink: '/breadcrumb/router/detail/' + detail.id} + } + + getListNode(type) { + let listNode; + switch(type) { + case 'fruit': + listNode = {label: 'Fruits', icon: 'fa fa-lemon-o', routeLink: '/breadcrumb/router/fruits'}; // 请尽量使用绝对路径 + break; + case 'digital': + listNode = {label: 'Digital', icon: 'fa fa-camera', routeLink: '/breadcrumb/router/digital'}; + break; + default: listNode = {label: 'Fruits', icon: 'fa fa-lemon-o', routeLink: '/breadcrumb/router/fruits'}; + } + return listNode; + } + // ==================================================================== // ignore the following lines, they are not important to this demo // ==================================================================== diff --git a/src/app/demo/breadcrumb/router/detail/detail.ts b/src/app/demo/breadcrumb/router/detail/detail.ts index 0f996f5e68..5087c840c4 100644 --- a/src/app/demo/breadcrumb/router/detail/detail.ts +++ b/src/app/demo/breadcrumb/router/detail/detail.ts @@ -6,9 +6,7 @@ import {ActivatedRoute, ParamMap} from "@angular/router"; template: ` name: {{product?.name}}
price: {{product?.price}}
- buy now -
- + buy now ` }) export class BreadcrumbRouterDetail implements OnInit { diff --git a/src/app/demo/breadcrumb/router/digital/digital.ts b/src/app/demo/breadcrumb/router/digital/digital.ts index 7a76f823d6..41c5efad61 100644 --- a/src/app/demo/breadcrumb/router/digital/digital.ts +++ b/src/app/demo/breadcrumb/router/digital/digital.ts @@ -8,7 +8,6 @@ import {Component} from "@angular/core";
  • computer
    • - `, styles: [` li:focus { diff --git a/src/app/demo/breadcrumb/router/fruits/fruits.ts b/src/app/demo/breadcrumb/router/fruits/fruits.ts index eae0c8fb1b..bed1923707 100644 --- a/src/app/demo/breadcrumb/router/fruits/fruits.ts +++ b/src/app/demo/breadcrumb/router/fruits/fruits.ts @@ -3,12 +3,11 @@ import {Component} from "@angular/core"; @Component({ template: `
    - `, styles: [` li:focus { diff --git a/src/app/demo/breadcrumb/router/product.service.ts b/src/app/demo/breadcrumb/router/product.service.ts index 1fc940a053..b0d899ed71 100644 --- a/src/app/demo/breadcrumb/router/product.service.ts +++ b/src/app/demo/breadcrumb/router/product.service.ts @@ -2,32 +2,38 @@ export const ProduceData = [ { id: 0, name: 'apple', - price: '$1.11' + price: '$1.11', + type: 'fruit' }, { id: 1, name: 'pear', - price: '$1.21' + price: '$1.21', + type: 'fruit' }, { id: 2, name: 'orange', - price: '$1.31' + price: '$1.31', + type: 'fruit' }, { id: 3, name: 'phone', - price: '$70.11' + price: '$70.11', + type: 'digital' }, { id: 4, name: 'pad', - price: '$20.11' + price: '$20.11', + type: 'digital' }, { id: 5, name: 'computer', - price: '$30.11' + price: '$30.11', + type: 'digital' } ]; diff --git a/src/jigsaw/component/breadcrumb/breadcrumb.ts b/src/jigsaw/component/breadcrumb/breadcrumb.ts index 49903b1b26..2561a8f3dc 100644 --- a/src/jigsaw/component/breadcrumb/breadcrumb.ts +++ b/src/jigsaw/component/breadcrumb/breadcrumb.ts @@ -24,7 +24,7 @@ export type BreadcrumbNode = { routeLink?: string; } -export type BreadcrumbGenerator = (routeNode: string) => BreadcrumbNode; +export type BreadcrumbGenerator = (routeNode: string) => BreadcrumbNode | BreadcrumbNode[]; @Component({ selector: 'jigsaw-breadcrumb, j-breadcrumb', @@ -97,9 +97,12 @@ export class JigsawBreadcrumb extends AbstractJigsawComponent implements OnDestr let breadcrumbNodeTemp: any = routeConfig[Object.keys(routeConfig)[0]]; breadcrumbNodeTemp = typeof breadcrumbNodeTemp == 'function' ? CommonUtils.safeInvokeCallback(this.generatorContext, breadcrumbNodeTemp, [decodeURIComponent(urlNode)]) : breadcrumbNodeTemp; - const breadcrumbNode: BreadcrumbNode = Object.assign({}, breadcrumbNodeTemp); - breadcrumbNode.routeLink = breadcrumbNode.routeLink ? breadcrumbNode.routeLink : decodeURI(url); - breadcrumbNodes.unshift(breadcrumbNode); + breadcrumbNodeTemp = breadcrumbNodeTemp instanceof Array ? breadcrumbNodeTemp : [breadcrumbNodeTemp]; + breadcrumbNodeTemp.reverse().forEach((breadcrumbNode: BreadcrumbNode) => { + breadcrumbNode = Object.assign({}, breadcrumbNode); + breadcrumbNode.routeLink = breadcrumbNode.routeLink ? breadcrumbNode.routeLink : decodeURI(url); + breadcrumbNodes.unshift(breadcrumbNode); + }) } return this._generateBreadcrumb(url.slice(0, url.lastIndexOf('/') == -1 ? 0 : url.lastIndexOf('/')), breadcrumbNodes); } From adb8316004a67d1efe13906df7c8397ab94ae5bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=A4=E6=B5=B7=E9=B9=8F10210844?= Date: Tue, 8 Jan 2019 15:35:46 +0800 Subject: [PATCH 2/5] optimize demo Change-Id: I26cdd43d9e90a661cad1ed551f585f1817f8e6ff --- src/app/demo/breadcrumb/demo-set.module.ts | 8 ++--- .../breadcrumb/router/demo.component.html | 5 +-- .../demo/breadcrumb/router/demo.component.ts | 36 ++++++++++++------- src/app/demo/breadcrumb/router/demo.module.ts | 8 ++--- .../demo/breadcrumb/router/detail/detail.ts | 2 +- .../demo/breadcrumb/router/digital/digital.ts | 20 ----------- .../demo/breadcrumb/router/fruits/fruits.ts | 20 ----------- src/app/demo/breadcrumb/router/list/list.ts | 31 ++++++++++++++++ .../demo/breadcrumb/router/product.service.ts | 16 +++++---- 9 files changed, 75 insertions(+), 71 deletions(-) delete mode 100644 src/app/demo/breadcrumb/router/digital/digital.ts delete mode 100644 src/app/demo/breadcrumb/router/fruits/fruits.ts create mode 100644 src/app/demo/breadcrumb/router/list/list.ts diff --git a/src/app/demo/breadcrumb/demo-set.module.ts b/src/app/demo/breadcrumb/demo-set.module.ts index 8faecc96eb..3c5bae1d17 100644 --- a/src/app/demo/breadcrumb/demo-set.module.ts +++ b/src/app/demo/breadcrumb/demo-set.module.ts @@ -4,8 +4,7 @@ import {BreadcrumbBasicDemoModule} from "./basic/demo.module"; import {BreadcrumbBasicDemoComponent} from "./basic/demo.component"; import {BreadcrumbRouterDemoComponent} from "./router/demo.component"; import {BreadcrumbRouterDemoModule} from "./router/demo.module"; -import {BreadcrumbRouterFruits} from "./router/fruits/fruits"; -import {BreadcrumbRouterDigital} from "./router/digital/digital"; +import {BreadcrumbRouterList} from "./router/list/list"; import {BreadcrumbRouterDetail} from "./router/detail/detail"; import {BreadcrumbRouterBuy} from "./router/buy/buy"; @@ -17,10 +16,7 @@ export const routerConfig = [ path: 'router', component: BreadcrumbRouterDemoComponent, children: [ { - path: 'fruits', component: BreadcrumbRouterFruits - }, - { - path: 'digital', component: BreadcrumbRouterDigital + path: 'list/:typeId', component: BreadcrumbRouterList }, { path: 'detail/:id', component: BreadcrumbRouterDetail diff --git a/src/app/demo/breadcrumb/router/demo.component.html b/src/app/demo/breadcrumb/router/demo.component.html index b14c9d97f5..9aa72f87f1 100644 --- a/src/app/demo/breadcrumb/router/demo.component.html +++ b/src/app/demo/breadcrumb/router/demo.component.html @@ -12,10 +12,11 @@

    导航面包屑

    内页面包屑

    -

    简易路由

    点击下面的超链切换路由，面包屑会根据路由自行设置面包屑路径。

    -Fruits | Digital + + {{productType.name}} | +
    diff --git a/src/app/demo/breadcrumb/router/demo.component.ts b/src/app/demo/breadcrumb/router/demo.component.ts index 3d8526b5e1..491d099a17 100644 --- a/src/app/demo/breadcrumb/router/demo.component.ts +++ b/src/app/demo/breadcrumb/router/demo.component.ts @@ -26,16 +26,20 @@ export class BreadcrumbRouterDemoComponent { routes: BreadcrumbRouteConfig[] = [ {'breadcrumb/router': {label: 'Product List', icon: 'fa fa-list'}}, - {'breadcrumb/router/fruits': {label: 'Fruits', icon: 'fa fa-lemon-o'}}, - {'breadcrumb/router/digital': {label: 'Digital', icon: 'fa fa-camera'}}, + {'breadcrumb/router/list/*': this.listBreadcrumbGenerator}, {'breadcrumb/router/detail/*': this.detailBreadcrumbGenerator}, {'breadcrumb/router/buy/*': this.buyBreadcrumbGenerator}, ]; + listBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { + return this.getListNode(routeNode); + } + detailBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { const detail = this.productService.getProductById(parseInt(routeNode)); return [ - this.getListNode(detail.type), // 自定义的节点写在前面，随便写会导致面包屑生成的位置不对 + // 自定义的节点写在前面，随便写会导致面包屑生成的位置不对 + this.getListNode(detail.typeId), {label: detail.name} ]; }; @@ -43,30 +47,38 @@ export class BreadcrumbRouterDemoComponent { buyBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { const detail = this.productService.getProductById(parseInt(routeNode)); return [ - this.getListNode(detail.type), + // 自定义的节点写在前面，随便写会导致面包屑生成的位置不对 + this.getListNode(detail.typeId), this.getDetailNode(detail), {label: 'Buy', icon: 'fa fa-shopping-cart'} ]; } getDetailNode(detail) { - return {label: detail.name, routeLink: '/breadcrumb/router/detail/' + detail.id} + return {label: detail.name, routeLink: '/breadcrumb/router/detail/' + detail.id} // 请尽量使用绝对路径 } - getListNode(type) { + getListNode(typeId) { let listNode; - switch(type) { - case 'fruit': - listNode = {label: 'Fruits', icon: 'fa fa-lemon-o', routeLink: '/breadcrumb/router/fruits'}; // 请尽量使用绝对路径 + switch (typeId) { + case 0: + listNode = {label: 'Fruits', icon: 'fa fa-lemon-o'}; break; - case 'digital': - listNode = {label: 'Digital', icon: 'fa fa-camera', routeLink: '/breadcrumb/router/digital'}; + case 1: + listNode = {label: 'Digital', icon: 'fa fa-camera'}; break; - default: listNode = {label: 'Fruits', icon: 'fa fa-lemon-o', routeLink: '/breadcrumb/router/fruits'}; + default: + listNode = {label: 'Fruits', icon: 'fa fa-lemon-o'}; } + listNode.routeLink = '/breadcrumb/router/list/' + typeId; // 请尽量使用绝对路径 return listNode; } + productTypeList = [ + {id: 0, name: 'Fruits'}, + {id: 1, name: 'Digital'} + ]; + // ==================================================================== // ignore the following lines, they are not important to this demo // ==================================================================== diff --git a/src/app/demo/breadcrumb/router/demo.module.ts b/src/app/demo/breadcrumb/router/demo.module.ts index a535a6469b..4ba884323d 100644 --- a/src/app/demo/breadcrumb/router/demo.module.ts +++ b/src/app/demo/breadcrumb/router/demo.module.ts @@ -3,17 +3,17 @@ import {JigsawDemoDescriptionModule} from "app/demo-description/demo-description import {BreadcrumbRouterDemoComponent} from "./demo.component"; import {JigsawBreadcrumbModule} from "jigsaw/component/breadcrumb/breadcrumb"; import {RouterModule} from "@angular/router"; -import {BreadcrumbRouterFruits} from "./fruits/fruits"; -import {BreadcrumbRouterDigital} from "./digital/digital"; +import {BreadcrumbRouterList} from "./list/list"; import {BreadcrumbRouterDetail} from "./detail/detail"; import {BreadcrumbRouterBuy} from "./buy/buy"; import {ProductService} from "./product.service"; +import {CommonModule} from "@angular/common"; @NgModule({ - declarations: [BreadcrumbRouterDemoComponent, BreadcrumbRouterFruits, BreadcrumbRouterDigital, + declarations: [BreadcrumbRouterDemoComponent, BreadcrumbRouterList, BreadcrumbRouterDetail, BreadcrumbRouterBuy], exports: [BreadcrumbRouterDemoComponent], - imports: [JigsawBreadcrumbModule, JigsawDemoDescriptionModule, RouterModule], + imports: [JigsawBreadcrumbModule, JigsawDemoDescriptionModule, RouterModule, CommonModule], providers: [ProductService] }) export class BreadcrumbRouterDemoModule { diff --git a/src/app/demo/breadcrumb/router/detail/detail.ts b/src/app/demo/breadcrumb/router/detail/detail.ts index 5087c840c4..2f0c5586ea 100644 --- a/src/app/demo/breadcrumb/router/detail/detail.ts +++ b/src/app/demo/breadcrumb/router/detail/detail.ts @@ -11,11 +11,11 @@ import {ActivatedRoute, ParamMap} from "@angular/router"; }) export class BreadcrumbRouterDetail implements OnInit { constructor(public productService: ProductService, public route: ActivatedRoute) { - this.product = this.route.paramMap.map((params: ParamMap) => { return this.productService.getProductById(parseInt(params.get('id'))) }) } + product: any; ngOnInit() { diff --git a/src/app/demo/breadcrumb/router/digital/digital.ts b/src/app/demo/breadcrumb/router/digital/digital.ts deleted file mode 100644 index 41c5efad61..0000000000 --- a/src/app/demo/breadcrumb/router/digital/digital.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {Component} from "@angular/core"; - -@Component({ - template: ` - -
    - `, - styles: [` - li:focus { - outline: none; - } - `] -}) -export class BreadcrumbRouterDigital { - -} diff --git a/src/app/demo/breadcrumb/router/fruits/fruits.ts b/src/app/demo/breadcrumb/router/fruits/fruits.ts deleted file mode 100644 index bed1923707..0000000000 --- a/src/app/demo/breadcrumb/router/fruits/fruits.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {Component} from "@angular/core"; - -@Component({ - template: ` - -
    - `, - styles: [` - li:focus { - outline: none; - } - `] -}) -export class BreadcrumbRouterFruits { - -} diff --git a/src/app/demo/breadcrumb/router/list/list.ts b/src/app/demo/breadcrumb/router/list/list.ts new file mode 100644 index 0000000000..4ea061a78a --- /dev/null +++ b/src/app/demo/breadcrumb/router/list/list.ts @@ -0,0 +1,31 @@ +import {Component} from "@angular/core"; +import {ProductService} from "../product.service"; +import {ActivatedRoute, ParamMap} from "@angular/router"; + +@Component({ + template: ` + + `, + styles: [` + li:focus { + outline: none; + } + `] +}) +export class BreadcrumbRouterList { + constructor(public productService: ProductService, public route: ActivatedRoute) { + this.productList = this.route.paramMap.map((params: ParamMap) => { + return this.productService.getProductListByTypeId(parseInt(params.get('typeId'))) + }) + } + + productList: any; + + ngOnInit() { + this.route.paramMap.subscribe((params: ParamMap) => { + this.productList = this.productService.getProductListByTypeId(parseInt(params.get('typeId'))) + }); + } +} diff --git a/src/app/demo/breadcrumb/router/product.service.ts b/src/app/demo/breadcrumb/router/product.service.ts index b0d899ed71..56a961f439 100644 --- a/src/app/demo/breadcrumb/router/product.service.ts +++ b/src/app/demo/breadcrumb/router/product.service.ts @@ -3,37 +3,37 @@ export const ProduceData = [ id: 0, name: 'apple', price: '$1.11', - type: 'fruit' + typeId: 0 }, { id: 1, name: 'pear', price: '$1.21', - type: 'fruit' + typeId: 0 }, { id: 2, name: 'orange', price: '$1.31', - type: 'fruit' + typeId: 0 }, { id: 3, name: 'phone', price: '$70.11', - type: 'digital' + typeId: 1 }, { id: 4, name: 'pad', price: '$20.11', - type: 'digital' + typeId: 1 }, { id: 5, name: 'computer', price: '$30.11', - type: 'digital' + typeId: 1 } ]; @@ -41,4 +41,8 @@ export class ProductService { getProductById(id: number) { return ProduceData.find(p => p.id == id); } + + getProductListByTypeId(typeId): any[] { + return ProduceData.filter(p => p.typeId == typeId); + } } From a9f1c3b8bba816748d3b2e0eecd44cd92cde9478 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=A4=E6=B5=B7=E9=B9=8F10210844?= Date: Tue, 8 Jan 2019 15:46:32 +0800 Subject: [PATCH 3/5] optimize demo Change-Id: I43b60be84a180bf86ec1ffd66bd5634565a41159 --- src/app/demo/breadcrumb/router/demo.component.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/demo/breadcrumb/router/demo.component.ts b/src/app/demo/breadcrumb/router/demo.component.ts index 491d099a17..a4a1a6e6ed 100644 --- a/src/app/demo/breadcrumb/router/demo.component.ts +++ b/src/app/demo/breadcrumb/router/demo.component.ts @@ -36,18 +36,22 @@ export class BreadcrumbRouterDemoComponent { } detailBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { + // routeNode指当前url的最后一个节点，比如url为breadcrumb/router/detail/1这边的routeNode是1 const detail = this.productService.getProductById(parseInt(routeNode)); + // 自定义面包屑节点 return [ - // 自定义的节点写在前面，随便写会导致面包屑生成的位置不对 + // 节点的顺序是面包屑从左往右的显示顺序 this.getListNode(detail.typeId), {label: detail.name} ]; }; buyBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { + // routeNode指当前url的最后一个节点，比如url为breadcrumb/router/buy/1这边的routeNode是1 const detail = this.productService.getProductById(parseInt(routeNode)); + // 自定义面包屑节点 return [ - // 自定义的节点写在前面，随便写会导致面包屑生成的位置不对 + // 节点的顺序是面包屑从左往右的显示顺序 this.getListNode(detail.typeId), this.getDetailNode(detail), {label: 'Buy', icon: 'fa fa-shopping-cart'} From 4eedbc11b998f6bcf53d47ce2ac2e4211b7a58c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=A4=E6=B5=B7=E9=B9=8F10210844?= Date: Tue, 8 Jan 2019 16:07:45 +0800 Subject: [PATCH 4/5] optimize code Change-Id: I1f974d66ea90fa8f863de6842d0ce276999ba4c5 --- src/jigsaw/component/breadcrumb/breadcrumb.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/jigsaw/component/breadcrumb/breadcrumb.ts b/src/jigsaw/component/breadcrumb/breadcrumb.ts index 2561a8f3dc..295ef0d9a0 100644 --- a/src/jigsaw/component/breadcrumb/breadcrumb.ts +++ b/src/jigsaw/component/breadcrumb/breadcrumb.ts @@ -93,12 +93,12 @@ export class JigsawBreadcrumb extends AbstractJigsawComponent implements OnDestr }); if (routeConfig) { const urlNode = url.slice(url.lastIndexOf('/') + 1); - // 找到option部分，拷贝一份，保证原数据不变 let breadcrumbNodeTemp: any = routeConfig[Object.keys(routeConfig)[0]]; breadcrumbNodeTemp = typeof breadcrumbNodeTemp == 'function' ? CommonUtils.safeInvokeCallback(this.generatorContext, breadcrumbNodeTemp, [decodeURIComponent(urlNode)]) : breadcrumbNodeTemp; breadcrumbNodeTemp = breadcrumbNodeTemp instanceof Array ? breadcrumbNodeTemp : [breadcrumbNodeTemp]; breadcrumbNodeTemp.reverse().forEach((breadcrumbNode: BreadcrumbNode) => { + // 拷贝一份，保证原数据不变 breadcrumbNode = Object.assign({}, breadcrumbNode); breadcrumbNode.routeLink = breadcrumbNode.routeLink ? breadcrumbNode.routeLink : decodeURI(url); breadcrumbNodes.unshift(breadcrumbNode); From e8be5a5d1ab29e114f9e17961af685d75c207db4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=A4=E6=B5=B7=E9=B9=8F10210844?= Date: Tue, 8 Jan 2019 16:37:48 +0800 Subject: [PATCH 5/5] fixes demo bug Change-Id: Id21addf02a079cf5a580829906164bb956190bf1 --- src/app/demo/breadcrumb/router/demo.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/demo/breadcrumb/router/demo.component.ts b/src/app/demo/breadcrumb/router/demo.component.ts index a4a1a6e6ed..dc8e940b2c 100644 --- a/src/app/demo/breadcrumb/router/demo.component.ts +++ b/src/app/demo/breadcrumb/router/demo.component.ts @@ -32,7 +32,7 @@ export class BreadcrumbRouterDemoComponent { ]; listBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] { - return this.getListNode(routeNode); + return this.getListNode(parseInt(routeNode)); } detailBreadcrumbGenerator(routeNode: string): BreadcrumbNode | BreadcrumbNode[] {