From 87cdd28384e237475fe8a32804ecfe172223429a Mon Sep 17 00:00:00 2001 From: Zhou Zhenzhou <275028888@qq.com> Date: Sat, 11 Jul 2020 10:51:41 +0800 Subject: [PATCH] feat(module:breadcrumb): add `nzRouteLabelFn` property (#5523) (#5545) --- components/breadcrumb/breadcrumb.component.ts | 3 +- components/breadcrumb/breadcrumb.spec.ts | 38 +++++++++++++++++++ components/breadcrumb/doc/index.en-US.md | 23 ++++++++++- components/breadcrumb/doc/index.zh-CN.md | 23 ++++++++++- 4 files changed, 84 insertions(+), 3 deletions(-) diff --git a/components/breadcrumb/breadcrumb.component.ts b/components/breadcrumb/breadcrumb.component.ts index 52d3a2fe9a2..2afc0bbb401 100644 --- a/components/breadcrumb/breadcrumb.component.ts +++ b/components/breadcrumb/breadcrumb.component.ts @@ -52,6 +52,7 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy { @Input() @InputBoolean() nzAutoGenerate = false; @Input() nzSeparator: string | TemplateRef | null = '/'; @Input() nzRouteLabel: string = 'breadcrumb'; + @Input() nzRouteLabelFn: (label: string) => string = label => label; breadcrumbs: BreadcrumbOption[] | undefined = []; @@ -118,7 +119,7 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy { .filter(path => path) .join('/'); const nextUrl = url + `/${routeURL}`; - const breadcrumbLabel = child.snapshot.data[this.nzRouteLabel]; + const breadcrumbLabel = this.nzRouteLabelFn(child.snapshot.data[this.nzRouteLabel]); // If have data, go to generate a breadcrumb for it. if (routeURL && breadcrumbLabel) { const breadcrumb: BreadcrumbOption = { diff --git a/components/breadcrumb/breadcrumb.spec.ts b/components/breadcrumb/breadcrumb.spec.ts index f4d3ccbe6dc..eea7aa55769 100644 --- a/components/breadcrumb/breadcrumb.spec.ts +++ b/components/breadcrumb/breadcrumb.spec.ts @@ -167,6 +167,34 @@ describe('breadcrumb', () => { router.navigate(['one', 'two', 'three', 'four']); flushFixture(fixture); expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(2); + expect(breadcrumb.componentInstance.breadcrumbs[0].label).toBe('Layer 2'); + expect(breadcrumb.componentInstance.breadcrumbs[1].label).toBe('Layer 3'); + }); + })); + + it('should [nzRouteLabelFn] work', fakeAsync(() => { + TestBed.configureTestingModule({ + imports: [CommonModule, NzBreadCrumbModule, RouterTestingModule.withRoutes(customRouteLabelRoutes)], + declarations: [NzBreadcrumbRouteLabelWithCustomFnDemoComponent, NzBreadcrumbNullComponent] + }).compileComponents(); + + fixture = TestBed.createComponent(NzBreadcrumbRouteLabelWithCustomFnDemoComponent); + breadcrumb = fixture.debugElement.query(By.directive(NzBreadCrumbComponent)); + + fixture.ngZone!.run(() => { + router = TestBed.inject(Router); + router.initialNavigation(); + + // Should nzRouteLabel value is 'customBreadcrumb' + flushFixture(fixture); + expect(breadcrumb.componentInstance.nzRouteLabel).toBe('customBreadcrumb'); + + // Should generate 2 breadcrumbs when reaching out of the `data` scope. + router.navigate(['one', 'two', 'three', 'four']); + flushFixture(fixture); + expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(2); + expect(breadcrumb.componentInstance.breadcrumbs[0].label).toBe('Layer 2 Layer 2'); + expect(breadcrumb.componentInstance.breadcrumbs[1].label).toBe('Layer 3 Layer 3'); }); })); @@ -234,6 +262,16 @@ class NzBreadcrumbAutoGenerateDemoComponent {} }) class NzBreadcrumbRouteLabelDemoComponent {} +@Component({ + template: ` + + + ` +}) +class NzBreadcrumbRouteLabelWithCustomFnDemoComponent { + labelFn = (label: string) => (label ? `${label} ${label}` : ''); +} + @Component({ template: '' }) diff --git a/components/breadcrumb/doc/index.en-US.md b/components/breadcrumb/doc/index.en-US.md index e619a7326c8..9ef4180043f 100755 --- a/components/breadcrumb/doc/index.en-US.md +++ b/components/breadcrumb/doc/index.en-US.md @@ -26,6 +26,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; | `[nzSeparator]` | Custom separator | `string \| TemplateRef \| null` | `'/'` | | `[nzAutoGenerate]` | Auto generate breadcrumb | `boolean` | `false` | | `[nzRouteLabel]` | Name of property that determines displayed text in routing config. It should be used when `nzAutoGenerate` is `true` | `string` | `'breadcrumb'` | +| `[nzRouteLabelFn]` | Format breadcrumb item label text，normally used in international app to translate i18n key. It should be used when `nzAutoGenerate` is `true` | `(label:string) => string` | `label => label` | Using `[nzAutoGenerate]` by configuring `data` like this: @@ -39,7 +40,7 @@ Using `[nzAutoGenerate]` by configuring `data` like this: } ``` -For lazy loading moduels, you should write `data` in parent module like this: +For lazy loading modules, you should write `data` in parent module like this: ```ts { @@ -65,4 +66,24 @@ use `nzRouteLabel` to custom `data` breadcrumb label: customBreadcrumb: 'Display Name' } } +``` + +use `nzRouteLabelFn` to format breadcrumb label in international application: + +```html + +``` + +```ts +// In Route +{ + path: 'path', + component: SomeComponent, + data: { + breadcrumbI18nKey: 'i18n.aaa.bbbb' + } +} + +// In component +translateFn = (key:string) => this.yourI18nService.translate(key); ``` \ No newline at end of file diff --git a/components/breadcrumb/doc/index.zh-CN.md b/components/breadcrumb/doc/index.zh-CN.md index 634adc2ae55..6670354a94e 100755 --- a/components/breadcrumb/doc/index.zh-CN.md +++ b/components/breadcrumb/doc/index.zh-CN.md @@ -26,6 +26,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; | `[nzSeparator]` | 分隔符自定义 | `string \| TemplateRef \| null` | `'/'` | | `[nzAutoGenerate]` | 自动生成 Breadcrumb | `boolean` | `false` | | `[nzRouteLabel]` | 自定义 route data 属性名称, `nzAutoGenerate` 为 `true` 时才生效 | `string` | `'breadcrumb'` | +| `[nzRouteLabelFn]` | 格式化面包屑导航项的显示文字，通常用于在国际化应用中翻译键值, `nzAutoGenerate` 为 `true` 时才生效 | `(label:string) => string` | `label => label` | 使用 `[nzAutoGenerate]` 时，需要在路由类中定义 `data`: @@ -65,4 +66,24 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; customBreadcrumb: 'Display Name' } } -``` \ No newline at end of file +``` + +使用 `nzRouteLabelFn` 在国际化应用中格式化面包屑导航项的文本: + +```html + +``` + +```ts +// In Route +{ + path: 'path', + component: SomeComponent, + data: { + breadcrumbI18nKey: 'i18n.aaa.bbbb' + } +} + +// In component +translateFn = (key: string) => this.yourI18nService.translate(key); +```