fix(module:breadcrumb): fix breadcrumb when Routes path='' (#4966)

* fix(module:breadcrumb): fix breadcrumb when Routes path='' * fix(module:breadcrumb): fix breadcrumb when Routes path='' * fix(module:breadcrumb): fix breadcrumb when Routes path='' * fix(module:breadcrumb): fix breadcrumb when Routes path=''
NG-ZORRO · May 6, 2020 · 5ffa45c · 5ffa45c
1 parent 93676c9
commit 5ffa45c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/components/breadcrumb/breadcrumb.component.ts b/components/breadcrumb/breadcrumb.component.ts
@@ -116,7 +116,10 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
       if (child.outlet === PRIMARY_OUTLET) {
         // Only parse components in primary router-outlet (in another word, router-outlet without a specific name).
         // Parse this layer and generate a breadcrumb item.
-        const routeURL: string = child.snapshot.url.map(segment => segment.path).join('/');
+        const routeURL: string = child.snapshot.url
+          .map(segment => segment.path)
+          .filter(path => path)
+          .join('/');
         const nextUrl = url + `/${routeURL}`;
         const breadcrumbLabel = child.snapshot.data[this.nzRouteLabel];
         // If have data, go to generate a breadcrumb for it.

diff --git a/components/breadcrumb/breadcrumb.spec.ts b/components/breadcrumb/breadcrumb.spec.ts
@@ -137,6 +137,12 @@ describe('breadcrumb', () => {
         router.navigate(['one']);
         flushFixture(fixture);
         expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(0);
+
+        router.navigate(['/']);
+        flushFixture(fixture);
+        router.navigate([{ outlets: { nonPrimary: ['one', 'two'] } }]);
+        flushFixture(fixture);
+        expect(router.url).toBe('/(nonPrimary:one/two)');
       });
     }));
 
@@ -164,6 +170,31 @@ describe('breadcrumb', () => {
       });
     }));
 
+    it('should route data breadcrumb navigate 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();
+
+        flushFixture(fixture);
+        expect(breadcrumb.componentInstance.nzRouteLabel).toBe('customBreadcrumb');
+
+        router.navigate(['one', 'two', 'three', 'four']);
+        flushFixture(fixture);
+
+        fixture.debugElement.query(By.css('a')).nativeElement.click();
+        flushFixture(fixture);
+        expect(router.url).toBe('/one/two');
+      });
+    }));
+
     it('should raise error when RouterModule is not included', fakeAsync(() => {
       TestBed.configureTestingModule({
         imports: [NzBreadCrumbModule],
@@ -190,7 +221,7 @@ function flushFixture(fixture: ComponentFixture<any>): void {
   template: `
     <nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb>
     <router-outlet></router-outlet>
-    <router-outlet name="non-primary"></router-outlet>
+    <router-outlet name="nonPrimary"></router-outlet>
   `
 })
 class NzBreadcrumbAutoGenerateDemoComponent {}
@@ -245,12 +276,24 @@ const routes: Routes = [
             ]
           }
         ]
-      },
-      // Should only work for the primary outlet.
+      }
+    ]
+  },
+  // Should only work for the primary outlet.
+  {
+    path: 'one',
+    outlet: 'nonPrimary',
+    component: NzBreadcrumbAutoGenerateDemoComponent,
+    data: {
+      breadcrumb: ''
+    },
+    children: [
       {
         path: 'two',
-        outlet: 'notprimary',
-        component: NzBreadcrumbNullComponent
+        component: NzBreadcrumbNullComponent,
+        data: {
+          breadcrumb: 'Layer 2'
+        }
       }
     ]
   }