feat(module:anchor): url fragment change on click - nzReplace

components/anchor/anchor-link.component.ts

@@ -57,6 +57,7 @@ import { NzAnchorComponent } from './anchor.component';
 export class NzAnchorLinkComponent implements OnInit, OnDestroy {
   @Input() nzHref = '#';
   @Input() nzTarget?: string;
+  @Input() nzReplace: boolean = false;
 
   titleStr: string | null = '';
   titleTpl?: TemplateRef<NzSafeAny>;
@@ -99,11 +100,11 @@ export class NzAnchorLinkComponent implements OnInit, OnDestroy {
     this.renderer.removeClass(this.elementRef.nativeElement, 'ant-anchor-link-active');
   }
 
-  goToClick(e: Event): void {
+  async goToClick(e: Event): Promise<void> {
     e.preventDefault();
     e.stopPropagation();
     if (this.platform.isBrowser) {
-      this.anchorComp.handleScrollTo(this);
+      await this.anchorComp.handleScrollTo(this);
     }
   }
 

components/anchor/anchor.component.ts

@@ -23,6 +23,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { fromEvent, Subject } from 'rxjs';
 import { takeUntil, throttleTime } from 'rxjs/operators';
 
@@ -112,6 +113,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
   @Input() nzContainer?: string | HTMLElement;
   @Input() nzCurrentAnchor?: string;
   @Input() nzDirection: NzDirectionVHType = 'vertical';
+  @Input() nzReplace: boolean = false;
 
   @Output() readonly nzClick = new EventEmitter<string>();
   @Output() readonly nzChange = new EventEmitter<string>();
@@ -135,7 +137,9 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
     private cdr: ChangeDetectorRef,
     private platform: Platform,
     private zone: NgZone,
-    private renderer: Renderer2
+    private renderer: Renderer2,
+    private router: Router,
+    private activatedRoute: ActivatedRoute
   ) {}
 
   registerLink(link: NzAnchorLinkComponent): void {
@@ -255,7 +259,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
     }
   }
 
-  handleScrollTo(linkComp: NzAnchorLinkComponent): void {
+  async handleScrollTo(linkComp: NzAnchorLinkComponent): Promise<void> {
     const el = this.doc.querySelector(linkComp.nzHref);
     if (!el) {
       return;
@@ -273,6 +277,7 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
       }
     });
     this.nzClick.emit(linkComp.nzHref);
+    await this.updateUrlFragment(linkComp.nzHref, linkComp.nzReplace);
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -291,4 +296,14 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
       this.setActive();
     }
   }
+
+  async updateUrlFragment(nzHref: string, replace?: boolean): Promise<void> {
+    let urlWithoutFragment = nzHref.split('#')[1] ?? nzHref;
+
+    await this.router.navigate([], {
+      relativeTo: this.activatedRoute,
+      fragment: urlWithoutFragment,
+      replaceUrl: replace ? replace : this.nzReplace
+    });
+  }
 }

components/anchor/anchor.spec.ts

@@ -1,31 +1,45 @@
 /* eslint-disable */
 // eslint-disable
-import { fakeAsync, tick, TestBed, ComponentFixture } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Component, DebugElement, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { NzScrollService } from 'ng-zorro-antd/core/services';
 import { NzAnchorModule } from './anchor.module';
 import { NzAnchorComponent } from './anchor.component';
 import { NzDirectionVHType } from 'ng-zorro-antd/core/types';
+import { ActivatedRoute, Router } from '@angular/router';
+import { of } from 'rxjs';
+import { RouterTestingModule } from '@angular/router/testing';
 
 const throttleTime = 51;
 
+const activatedRouteStub = {
+  paramMap: {
+    subscribe() {
+      return of();
+    }
+  }
+};
+
 describe('anchor', () => {
   let fixture: ComponentFixture<TestComponent>;
   let dl: DebugElement;
   let context: TestComponent;
   let page: PageObject;
   let srv: NzScrollService;
+  let router: Router;
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [NzAnchorModule],
+      providers: [{ provide: ActivatedRoute, useValue: activatedRouteStub }, RouterTestingModule],
       declarations: [TestComponent]
     });
     fixture = TestBed.createComponent(TestComponent);
     dl = fixture.debugElement;
     context = fixture.componentInstance;
     fixture.detectChanges();
     page = new PageObject();
+    router = TestBed.get(Router);
     spyOn(context, '_scroll');
     spyOn(context, '_change');
     srv = TestBed.inject(NzScrollService);
@@ -121,6 +135,28 @@ describe('anchor', () => {
         done();
       }, throttleTime);
     });
+
+    it('should call updateUrlFragment method when an anchor link is clicked', () => {
+      spyOn(context.comp, 'updateUrlFragment');
+      const linkList = dl.queryAll(By.css('.ant-anchor-link-title'));
+      (linkList[0].nativeElement as HTMLLinkElement).click();
+      fixture.detectChanges();
+      expect(context.comp.updateUrlFragment).toHaveBeenCalled();
+    });
+
+    it('should update fragment part of url when anchor link is clicked', fakeAsync(() => {
+      fixture['ngZone']!.run(() => {
+        router.initialNavigation();
+        router.navigateByUrl('/');
+
+        const linkList = dl.queryAll(By.css('.ant-anchor-link-title'));
+        (linkList[1].nativeElement as HTMLLinkElement).click();
+        fixture.detectChanges();
+      });
+      tick();
+
+      expect(router.url).toBe(`/#basic`);
+    }));
   });
 
   describe('property', () => {
@@ -302,6 +338,7 @@ describe('anchor', () => {
       [nzContainer]="nzContainer"
       [nzCurrentAnchor]="nzCurrentAnchor"
       [nzDirection]="nzDirection"
+      [nzReplace]="replace"
       (nzClick)="_click($event)"
       (nzScroll)="_scroll($event)"
       (nzChange)="_change($event)"
@@ -362,6 +399,7 @@ export class TestComponent {
   nzContainer: any = null;
   nzCurrentAnchor?: string;
   nzDirection: NzDirectionVHType = 'vertical';
+  replace = false;
   _click() {}
   _change() {}
   _scroll() {}

components/anchor/demo/replace.md

@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+  zh-CN: 替换历史中的 href
+  en-US: Replace href in history
+---
+
+## zh-CN
+
+替换浏览器历史记录中的路径，后退按钮将返回到上一页而不是上一个锚点。
+
+## en-US
+
+Replace path in browser history, so back button returns to previous page instead of previous anchor item.

components/anchor/demo/replace.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-anchor-replace',
+  template: `
+    <nz-anchor>
+      <nz-link [nzReplace]="true" nzHref="#components-anchor-demo-basic" nzTitle="Basic demo"></nz-link>
+      <nz-link [nzReplace]="false" nzHref="#components-anchor-demo-static" nzTitle="Static demo"></nz-link>
+      <nz-link [nzReplace]="false" nzHref="#api" nzTitle="API"> </nz-link>
+    </nz-anchor>
+  `
+})
+export class NzDemoAnchorReplaceComponent {}

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

@@ -21,22 +21,24 @@ import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 
 | Property             | Description                                                                                   | Type                                  | Default      | Global Config |
 | -------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------- | ------------ | ------------- |
-| `[nzAffix]`          | Fixed mode of Anchor                                                                          | `boolean`                             | `true`       |
+| `[nzAffix]`          | Fixed mode of Anchor                                                                          | `boolean`                             | `true`       |               |
 | `[nzBounds]`         | Bounding distance of anchor area, unit: px                                                    | `number`                              | `5`          | ✅            |
 | `[nzOffsetTop]`      | Pixels to offset from top when calculating position of scroll                                 | `number`                              | `0`          | ✅            |
 | `[nzShowInkInFixed]` | Whether show ink-balls in Fixed mode                                                          | `boolean`                             | `false`      | ✅            |
 | `[nzTargetOffset]`   | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | `number`                              | -            |               |
-| `[nzContainer]`      | Scrolling container                                                                           | `string \| HTMLElement`               | `window`     |
+| `[nzContainer]`      | Scrolling container                                                                           | `string \| HTMLElement`               | `window`     |               |
 | `[nzCurrentAnchor]`  | Customize the anchor highlight                                                                | `string`                              | -            |               |
 | `[nzDirection]`      | Set Anchor direction                                                                          | `'vertical' \| 'horizontal'`          | `'vertical'` |               |
-| `(nzClick)`          | Click of Anchor item                                                                          | `EventEmitter<string>`                | -            |
+| `[nzReplace]`        | Replace items' href in browser history instead of pushing it                                  | `boolean`                             | `false`      |               |
+| `(nzClick)`          | Click of Anchor item                                                                          | `EventEmitter<string>`                | -            |               |
 | `(nzChange)`         | Listening for anchor link change                                                              | `EventEmitter<string>`                | -            |               |
-| `(nzScroll)`         | The scroll function that is triggered when scrolling to an anchor.                            | `EventEmitter<NzAnchorLinkComponent>` | -            |
+| `(nzScroll)`         | The scroll function that is triggered when scrolling to an anchor.                            | `EventEmitter<NzAnchorLinkComponent>` | -            |               |
 
 ### nz-link:standalone
 
-| Property     | Description                               | Type                          |
-| ------------ | ----------------------------------------- | ----------------------------- |
-| `[nzHref]`   | target of hyperlink                       | `string`                      |
-| `[nzTarget]` | Specifies where to display the linked URL | `string`                      |
-| `[nzTitle]`  | content of hyperlink                      | `string \| TemplateRef<void>` |
+| Property      | Description                                                | Type                          | Default |
+| ------------- | ---------------------------------------------------------- | ----------------------------- | ------- |
+| `[nzHref]`    | target of hyperlink                                        | `string`                      | -       |
+| `[nzTarget]`  | Specifies where to display the linked URL                  | `string`                      | -       |
+| `[nzTitle]`   | content of hyperlink                                       | `string \| TemplateRef<void>` | -       |
+| `[nzReplace]` | Replace item href in browser history instead of pushing it | `boolean`                     | `false` |

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

@@ -30,14 +30,16 @@ import { NzAnchorModule } from 'ng-zorro-antd/anchor';
 | `[nzContainer]`      | 指定滚动的容器                                                                      | `string \| HTMLElement`               | `window`     |
 | `[nzCurrentAnchor]`  | 自定义高亮的锚点                                                                    | string                                | -            |          |
 | `[nzDirection]`      | 设置导航方向                                                                        | `'vertical' \| 'horizontal'`          | `'vertical'` |          |
+| `[nzReplace]`        | 替换浏览器历史记录中项目的 href 而不是推送它                                        | `boolean`                             | `false`      |          |
 | `(nzClick)`          | 点击项触发                                                                          | `EventEmitter<string>`                | -            |
 | `(nzChange)`         | 监听锚点链接改变                                                                    | `EventEmitter<string>`                | -            |          |
 | `(nzScroll)`         | 滚动至某锚点时触发                                                                  | `EventEmitter<NzAnchorLinkComponent>` | -            |
 
 ### nz-link:standalone
 
-| 成员         | 说明                             | 类型                          |
-| ------------ | -------------------------------- | ----------------------------- |
-| `[nzHref]`   | 锚点链接                         | `string`                      |
-| `[nzTarget]` | 该属性指定在何处显示链接的资源。 | `string`                      |
-| `[nzTitle]`  | 文字内容                         | `string \| TemplateRef<void>` |
+| 成员          | 说明                                         | 类型                          | Default |
+| ------------- | -------------------------------------------- | ----------------------------- | ------- |
+| `[nzHref]`    | 锚点链接                                     | `string`                      | -       |
+| `[nzTarget]`  | 该属性指定在何处显示链接的资源。             | `string`                      | -       |
+| `[nzTitle]`   | 文字内容                                     | `string \| TemplateRef<void>` | -       |
+| `[nzReplace]` | 替换浏览器历史记录中的项目 href 而不是推送它 | `boolean`                     | `false` |

scripts/site/template/demo-component.template.ts

@@ -10,12 +10,6 @@ export class {{componentName}} {
   expanded = false;
   @ViewChildren(NzCodeBoxComponent) codeBoxes!: QueryList<NzCodeBoxComponent>;
 
-  goLink(link: string): void {
-    if (window) {
-      window.location.hash = link;
-    }
-  }
-
   expandAllCode(): void {
     this.expanded = !this.expanded;
     this.codeBoxes.forEach(code => {

scripts/site/template/doc-component.template.ts

@@ -5,10 +5,4 @@ import { Component } from '@angular/core';
   templateUrl  : './{{component}}-{{language}}.html',
   preserveWhitespaces: false
 })
-export class NzDoc{{componentName}}Component {
-  goLink(link: string) {
-    if (window) {
-      window.location.hash = link;
-    }
-  }
-}
+export class NzDoc{{componentName}}Component { }

scripts/site/utils/generate-demo.js

@@ -167,7 +167,7 @@ function generateToc(language, name, demoMap) {
   const links = linkArray.map(link => link.content).join('');
   return `
 <nz-affix class="toc-affix" [nzOffsetTop]="16">
-    <nz-anchor [nzAffix]="false" nzShowInkInFixed (nzClick)="goLink($event)">
+    <nz-anchor [nzAffix]="false" nzShowInkInFixed>
         ${links}
     </nz-anchor>
 </nz-affix>`;

scripts/site/utils/generate-docs.js

@@ -43,7 +43,7 @@ function generateToc(meta, raw) {
   }
   return `
 <nz-affix class="toc-affix" [nzOffsetTop]="16">
-    <nz-anchor [nzAffix]="false" nzShowInkInFixed (nzClick)="goLink($event)">
+    <nz-anchor [nzAffix]="false" nzShowInkInFixed>
         ${links}
     </nz-anchor>
 </nz-affix>`;