fix(module:breadcrumb): navigate within angular (#2283)

close #2254
NG-ZORRO · Oct 18, 2018 · 0c41306 · 0c41306
1 parent 4fa9367
commit 0c41306
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 46 deletions.
diff --git a/components/breadcrumb/nz-breadcrumb.component.html b/components/breadcrumb/nz-breadcrumb.component.html
@@ -1,6 +1,7 @@
 <ng-content></ng-content>
 <ng-container *ngIf="nzAutoGenerate">
   <nz-breadcrumb-item *ngFor="let breadcrumb of breadcrumbs">
-    <a [attr.href]="breadcrumb.url">{{ breadcrumb.label }}</a>
+    <!-- We do not simply use routerLink here to avoid importing RouterModule to BreadcrumbModule. -->
+    <a [attr.href]="breadcrumb.url" (click)="navigate(breadcrumb.url, $event)">{{ breadcrumb.label }}</a>
   </nz-breadcrumb-item>
 </ng-container>
diff --git a/components/breadcrumb/nz-breadcrumb.component.ts b/components/breadcrumb/nz-breadcrumb.component.ts
@@ -56,9 +56,8 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
       return breadcrumbs; // If there's no sub root, then stop the recurse and returns the generated breadcrumbs.
     }
     for (const child of children) {
-      if (child.outlet !== PRIMARY_OUTLET) {
-        continue; // Only parse components in primary router-outlet (in another word, router-outlet without a specific name).
-      } else {
+      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 nextUrl = url + `/${routeURL}`;
@@ -76,7 +75,18 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
     }
   }
 
-  constructor(private _injector: Injector) {}
+  navigate(url: string, e: MouseEvent): void {
+    e.preventDefault(); // Stop browsers' default navigation behavior.
+    try {
+      const router = this._injector.get(Router);
+      router.navigateByUrl(url);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  constructor(private _injector: Injector) {
+  }
 
   ngOnInit(): void {
     if (this.nzAutoGenerate) {

diff --git a/components/breadcrumb/nz-breadcrumb.spec.ts b/components/breadcrumb/nz-breadcrumb.spec.ts
@@ -73,6 +73,8 @@ describe('breadcrumb', () => {
   describe('auto generated', () => {
     let breadcrumb;
     let router;
+    let items;
+    let zone;
 
     it('should support auto generating', fakeAsync(() => {
       // Prepare test bed.
@@ -82,43 +84,41 @@ describe('breadcrumb', () => {
       }).compileComponents();
       fixture = TestBed.createComponent(NzBreadcrumbAutoGenerateDemoComponent);
       fixture.detectChanges();
+
       breadcrumb = fixture.debugElement.query(By.directive(NzBreadCrumbComponent));
       testComponent = fixture.debugElement.componentInstance;
+      zone = TestBed.get(NgZone);
       router = TestBed.get(Router);
-      // A bug of Angular forces us to use zone now and cannot test a tag (it works, but Karma would timeout), see: https://github.com/angular/angular/issues/25837.
-      const zone = TestBed.get(NgZone);
       router.initialNavigation();
+
       zone.run(() => {
         router.navigate([ 'one', 'two', 'three', 'four' ]);
-      });
-      fixture.detectChanges();
-      flush();
-      fixture.detectChanges();
-      expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(2); // Should generate 2 breadrumbs when reaching out of the `data` scope.
-      // items = breadcrumb.nativeElement.querySelectorAll('.ant-breadcrumb-link a');
-      // dispatchMouseEvent(items[ 1 ], 'click'); // A link should work.
-      zone.run(() => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+        items = fixture.debugElement.queryAll(By.directive(NzBreadCrumbItemComponent));
+        // Should generate 2 breadcrumbs when reaching out of the `data` scope.
+        expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(2);
+        items = breadcrumb.nativeElement.querySelectorAll('.ant-breadcrumb-link a');
+        // A link should work. But a bug of Angular forces us to use zone now and cannot test <a> tag
+        // (it works, but Karma would timeout), see: https://github.com/angular/angular/issues/25837.
+        // dispatchMouseEvent(items[ 1 ], 'click');
         router.navigate([ 'one', 'two', 'three' ]);
-      });
-      fixture.detectChanges();
-      flush();
-      fixture.detectChanges();
-      expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(2);
-      // dispatchMouseEvent(items[ 0 ], 'click'); // A link should work.
-      zone.run(() => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+        expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(2);
         router.navigate([ 'one', 'two' ]);
-      });
-      fixture.detectChanges();
-      flush();
-      fixture.detectChanges();
-      expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(1);
-      zone.run(() => {
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+        expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(1);
         router.navigate([ 'one' ]);
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+        expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(0); // Shouldn't generate breadcrumb at all.
       });
-      fixture.detectChanges();
-      flush();
-      fixture.detectChanges();
-      expect(breadcrumb.componentInstance.breadcrumbs.length).toBe(0); // Shouldn't generate breadcrumb at all.
     }));
 
     it('should raise error when RouterModule is not included', fakeAsync(() => {
@@ -133,19 +133,6 @@ describe('breadcrumb', () => {
         fixture.detectChanges();
       }).toThrowError();
     }));
-
-    it('should not raise error when autoGenerate is not used', fakeAsync(() => {
-      TestBed.configureTestingModule({
-        imports     : [ NzBreadCrumbModule ],
-        declarations: [ NzBreadcrumbAutoGenerateErrorDemoComponent ]
-      }).compileComponents();
-      fixture = TestBed.createComponent(NzBreadcrumbAutoGenerateErrorDemoComponent);
-      testComponent = fixture.debugElement.componentInstance;
-      testComponent.autoGenerate = false;
-      expect(() => {
-        fixture.detectChanges();
-      }).not.toThrowError();
-    }));
   });
 });
 

diff --git a/components/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts
@@ -1481,7 +1481,6 @@ describe('cascader', () => {
       expect(testComponent.cascader.inSearch).toBe(true);
       itemEl1 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(1) .ant-cascader-menu-item:nth-child(1)') as HTMLElement;
       expect(itemEl1.innerText).toBe('Option1 / Option11');
-      console.log(testComponent.cascader.nzColumns[0], testComponent.cascader.nzOptions[0]);
     });
   });