feat(module:breadcrumb): add nzRouteLabelFn property (#5523) (#5545)

components/breadcrumb/breadcrumb.component.ts

@@ -52,6 +52,7 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() nzAutoGenerate = false;
   @Input() nzSeparator: string | TemplateRef<void> | 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 = {

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: `
+    <nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'customBreadcrumb'" [nzRouteLabelFn]="labelFn"></nz-breadcrumb>
+    <router-outlet></router-outlet>
+  `
+})
+class NzBreadcrumbRouteLabelWithCustomFnDemoComponent {
+  labelFn = (label: string) => (label ? `${label} ${label}` : '');
+}
+
 @Component({
   template: '<nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb>'
 })

components/breadcrumb/doc/index.en-US.md

@@ -26,6 +26,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 | `[nzSeparator]` | Custom separator | `string \| TemplateRef<void> \| 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
+<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'breadcrumbI18nKey'" [nzRouteLabelFn]="translateFn"></nz-breadcrumb>
+```
+
+```ts
+// In Route
+{
+  path: 'path',
+  component: SomeComponent,
+  data: {
+    breadcrumbI18nKey: 'i18n.aaa.bbbb'
+  }
+}
+
+// In component
+translateFn = (key:string) => this.yourI18nService.translate(key);
 ```

components/breadcrumb/doc/index.zh-CN.md

@@ -26,6 +26,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 | `[nzSeparator]` | 分隔符自定义 | `string \| TemplateRef<void> \| 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'
   }
 }
-```
+```
+
+使用 `nzRouteLabelFn` 在国际化应用中格式化面包屑导航项的文本:
+
+```html
+<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'breadcrumbI18nKey'" [nzRouteLabelFn]="translateFn"></nz-breadcrumb>
+```
+
+```ts
+// In Route
+{
+  path: 'path',
+  component: SomeComponent,
+  data: {
+    breadcrumbI18nKey: 'i18n.aaa.bbbb'
+  }
+}
+
+// In component
+translateFn = (key: string) => this.yourI18nService.translate(key);
+```