fix(module:breadcrumb): do not re-enter the Angular zone when calling…

… `navigate` (#6850)
NG-ZORRO · Nov 4, 2021 · 830a1f2 · 830a1f2
1 parent 47f91c7
commit 830a1f2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/components/breadcrumb/breadcrumb.component.ts b/components/breadcrumb/breadcrumb.component.ts
@@ -11,7 +11,6 @@ import {
   ElementRef,
   Injector,
   Input,
-  NgZone,
   OnDestroy,
   OnInit,
   Optional,
@@ -63,7 +62,6 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
 
   constructor(
     private injector: Injector,
-    private ngZone: NgZone,
     private cdr: ChangeDetectorRef,
     private elementRef: ElementRef,
     private renderer: Renderer2,
@@ -94,8 +92,7 @@ export class NzBreadCrumbComponent implements OnInit, OnDestroy {
 
   navigate(url: string, e: MouseEvent): void {
     e.preventDefault();
-
-    this.ngZone.run(() => this.injector.get(Router).navigateByUrl(url).then()).then();
+    this.injector.get(Router).navigateByUrl(url);
   }
 
   private registerRouterChange(): void {

diff --git a/components/breadcrumb/breadcrumb.spec.ts b/components/breadcrumb/breadcrumb.spec.ts
@@ -1,6 +1,6 @@
 import { BidiModule, Dir } from '@angular/cdk/bidi';
 import { CommonModule } from '@angular/common';
-import { Component, DebugElement, ViewChild } from '@angular/core';
+import { Component, DebugElement, NgZone, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, flush, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router, Routes } from '@angular/router';
@@ -251,6 +251,37 @@ describe('breadcrumb', () => {
         fixture.detectChanges();
       }).toThrowError();
     }));
+
+    it('should call navigate() within the Angular zone', fakeAsync(() => {
+      let navigateHasBeenCalledWithinTheAngularZone = false;
+
+      TestBed.configureTestingModule({
+        imports: [CommonModule, NzBreadCrumbModule, RouterTestingModule.withRoutes(customRouteLabelRoutes)],
+        declarations: [NzBreadcrumbRouteLabelDemoComponent, NzBreadcrumbNullComponent]
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(NzBreadcrumbRouteLabelDemoComponent);
+      breadcrumb = fixture.debugElement.query(By.directive(NzBreadCrumbComponent));
+
+      const navigate = breadcrumb.componentInstance.navigate;
+      const spy = spyOn(breadcrumb.componentInstance, 'navigate').and.callFake((url: string, event: MouseEvent) => {
+        navigateHasBeenCalledWithinTheAngularZone = NgZone.isInAngularZone();
+        return navigate.call(breadcrumb.componentInstance, url, event);
+      });
+
+      router = TestBed.inject(Router);
+      router.initialNavigation();
+      flushFixture(fixture);
+
+      router.navigate(['one', 'two']);
+      flushFixture(fixture);
+
+      fixture.debugElement.query(By.css('a')).nativeElement.click();
+      flushFixture(fixture);
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(navigateHasBeenCalledWithinTheAngularZone).toBeTrue();
+    }));
   });
 
   describe('RTL', () => {