feat(module:breadcrumb): add nzRouteLabel property (#4167)

* feat(module:breadcrumb): add `nzRouteDataBreadcrumbLabel` property

* feat(module:breadcrumb): change property to `nzRouteLabel`

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

@@ -29,6 +29,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 | -------- | ----------- | ---- | ------- |
 | `[nzSeparator]` | Custom separator | `string \| TemplateRef<void>` | `'/'` |
 | `[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'` |
 
 Using `[nzAutoGenerate]` by configuring `data` like this:
 
@@ -53,3 +54,19 @@ For lazy loading moduels, you should write `data` in parent module like this:
   },
 }
 ```
+
+use `nzRouteLabel` to custom `data` breadcrumb label:
+
+```html
+<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'customBreadcrumb'"></nz-breadcrumb>
+```
+
+```ts
+{
+  path: 'path',
+  component: SomeComponent,
+  data: {
+    customBreadcrumb: 'Display Name'
+  }
+}
+```

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

@@ -29,6 +29,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 | --- | --- | --- | --- |
 | `[nzSeparator]` | 分隔符自定义 | `string \| TemplateRef<void>` | `'/'` |
 | `[nzAutoGenerate]` | 自动生成 Breadcrumb | `boolean` | `false` |
+| `[nzRouteLabel]` | 自定义 route data 属性名称, `nzAutoGenerate` 为 `true` 时才生效 | `string` | `'breadcrumb'` |
 
 使用 `[nzAutoGenerate]` 时，需要在路由类中定义 `data`:
 
@@ -53,3 +54,19 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
   },
 }
 ```
+
+使用 `nzRouteLabel` 自定义路由属性名称:
+
+```html
+<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'customBreadcrumb'"></nz-breadcrumb>
+```
+
+```ts
+{
+  path: 'path',
+  component: SomeComponent,
+  data: {
+    customBreadcrumb: 'Display Name'
+  }
+}
+```

components/breadcrumb/nz-breadcrumb.component.ts

@@ -26,8 +26,6 @@ import { filter, startWith, takeUntil } from 'rxjs/operators';
 
 import { InputBoolean, PREFIX } from 'ng-zorro-antd/core';
 
-export const NZ_ROUTE_DATA_BREADCRUMB = 'breadcrumb';
-
 export interface BreadcrumbOption {
   label: string;
   params: Params;
@@ -52,6 +50,7 @@ export interface BreadcrumbOption {
 export class NzBreadCrumbComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() nzAutoGenerate = false;
   @Input() nzSeparator: string | TemplateRef<void> = '/';
+  @Input() nzRouteLabel: string = 'breadcrumb';
 
   breadcrumbs: BreadcrumbOption[] | undefined = [];
 
@@ -126,7 +125,7 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
         // Parse this layer and generate a breadcrumb item.
         const routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');
         const nextUrl = url + `/${routeURL}`;
-        const breadcrumbLabel = child.snapshot.data[NZ_ROUTE_DATA_BREADCRUMB];
+        const breadcrumbLabel = child.snapshot.data[this.nzRouteLabel];
         // If have data, go to generate a breadcrumb for it.
         if (routeURL && breadcrumbLabel) {
           const breadcrumb: BreadcrumbOption = {

components/breadcrumb/nz-breadcrumb.spec.ts

@@ -150,6 +150,30 @@ describe('breadcrumb', () => {
       });
     }));
 
+    it('should route data breadcrumb label work', fakeAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [CommonModule, NzBreadCrumbModule, RouterTestingModule.withRoutes(customRouteLabelRoutes)],
+        declarations: [NzBreadcrumbRouteLabelDemoComponent, NzBreadcrumbNullComponent]
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(NzBreadcrumbRouteLabelDemoComponent);
+      breadcrumb = fixture.debugElement.query(By.directive(NzBreadCrumbComponent));
+
+      fixture.ngZone!.run(() => {
+        router = TestBed.get(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);
+      });
+    }));
+
     it('should raise error when RouterModule is not included', fakeAsync(() => {
       TestBed.configureTestingModule({
         imports: [NzBreadCrumbModule],
@@ -181,6 +205,14 @@ function flushFixture(fixture: ComponentFixture<any>): void {
 })
 class NzBreadcrumbAutoGenerateDemoComponent {}
 
+@Component({
+  template: `
+    <nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'customBreadcrumb'"></nz-breadcrumb>
+    <router-outlet></router-outlet>
+  `
+})
+class NzBreadcrumbRouteLabelDemoComponent {}
+
 @Component({
   template: '<nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb>'
 })
@@ -233,3 +265,40 @@ const routes: Routes = [
     ]
   }
 ];
+
+const customRouteLabelRoutes: Routes = [
+  {
+    path: 'one',
+    component: NzBreadcrumbRouteLabelDemoComponent,
+    data: {
+      customBreadcrumb: ''
+    },
+    children: [
+      {
+        path: 'two',
+        component: NzBreadcrumbNullComponent,
+        data: {
+          customBreadcrumb: 'Layer 2'
+        },
+        children: [
+          {
+            path: 'three',
+            component: NzBreadcrumbNullComponent,
+            data: {
+              customBreadcrumb: 'Layer 3'
+            },
+            children: [
+              {
+                path: 'four',
+                component: NzBreadcrumbNullComponent,
+                data: {
+                  customBreadcrumb: ''
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+];