feat(module:pageheader): disable back button if no history (#9041)

* feat(module:pageheader): hide back button if no history

* refactor(module:pageheader): remove condition in condition

Author: Nicoss54

components/page-header/page-header.component.ts

@@ -13,21 +13,21 @@ import {
   ContentChild,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   OnDestroy,
   OnInit,
   Output,
   TemplateRef,
-  ViewEncapsulation,
-  inject
+  ViewEncapsulation
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 
 import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
-import { PREFIX } from 'ng-zorro-antd/core/logger';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzPageHeaderBreadcrumbDirective, NzPageHeaderFooterDirective } from './page-header-cells';
@@ -43,7 +43,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pageHeader';
     <div class="ant-page-header-heading">
       <div class="ant-page-header-heading-left">
         <!--back-->
-        @if (nzBackIcon !== null) {
+        @if (nzBackIcon !== null && enableBackButton) {
           <div (click)="onBack()" class="ant-page-header-back">
             <div role="button" tabindex="0" class="ant-page-header-back-button">
               <ng-container *nzStringTemplateOutlet="nzBackIcon; let backIcon">
@@ -94,6 +94,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pageHeader';
   imports: [NzOutletModule, NzIconModule]
 })
 export class NzPageHeaderComponent implements AfterViewInit, OnDestroy, OnInit {
+  private location = inject(Location);
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
 
   @Input() nzBackIcon: string | TemplateRef<void> | null = null;
@@ -111,7 +112,7 @@ export class NzPageHeaderComponent implements AfterViewInit, OnDestroy, OnInit {
   destroy$ = new Subject<void>();
   dir: Direction = 'ltr';
 
-  private location = inject(Location, { optional: true });
+  enableBackButton = true;
 
   constructor(
     public nzConfigService: NzConfigService,
@@ -126,11 +127,18 @@ export class NzPageHeaderComponent implements AfterViewInit, OnDestroy, OnInit {
       this.dir = direction;
       this.cdr.detectChanges();
     });
-
     this.dir = this.directionality.value;
   }
 
   ngAfterViewInit(): void {
+    if (!this.nzBack.observed) {
+      this.enableBackButton = (this.location.getState() as NzSafeAny)?.navigationId > 1;
+      this.location.subscribe(() => {
+        this.enableBackButton = true;
+        this.cdr.detectChanges();
+      });
+    }
+
     this.nzResizeObserver
       .observe(this.elementRef)
       .pipe(
@@ -147,11 +155,6 @@ export class NzPageHeaderComponent implements AfterViewInit, OnDestroy, OnInit {
     if (this.nzBack.observers.length) {
       this.nzBack.emit();
     } else {
-      if (!this.location) {
-        throw new Error(
-          `${PREFIX} you should import 'RouterModule' or register 'Location' if you want to use 'nzBack' default event!`
-        );
-      }
       this.location.back();
     }
   }

components/page-header/page-header.spec.ts

@@ -6,7 +6,7 @@
 import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { Location } from '@angular/common';
 import { Component, DebugElement, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -27,6 +27,7 @@ describe('NzPageHeaderComponent', () => {
       providers: [provideNzIconsTesting()]
     });
     location = TestBed.inject(Location);
+    spyOn(location, 'getState').and.returnValue({ navigationId: 2 });
   }));
 
   it('should basic work', () => {
@@ -39,6 +40,14 @@ describe('NzPageHeaderComponent', () => {
     expect(pageHeader.nativeElement.querySelector('.ant-page-header-heading-sub-title')).toBeTruthy();
   });
 
+  it('should displayed the back button if nzBack has observer', () => {
+    const fixture = TestBed.createComponent(NzDemoPageHeaderBasicComponent);
+    const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
+    fixture.detectChanges();
+    const back = pageHeader.nativeElement.querySelector('.ant-page-header-back-button');
+    expect(back).toBeTruthy();
+  });
+
   it('should ghost work', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderGhostComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
@@ -67,6 +76,29 @@ describe('NzPageHeaderComponent', () => {
     expect(location.back).toHaveBeenCalled();
   });
 
+  it('should not show the back button if there is no history of navigation', fakeAsync(() => {
+    const fixture = TestBed.createComponent(NzDemoPageHeaderResponsiveComponent);
+    const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
+    spyOn(location, 'getState').and.returnValue({ navigationId: 1 });
+    fixture.detectChanges();
+    pageHeader.componentInstance.ngAfterViewInit();
+    tick();
+    fixture.detectChanges();
+    const back = pageHeader.nativeElement.querySelector('.ant-page-header-back-button');
+    expect(back).toBeNull();
+  }));
+
+  it('should show the back button if there is history of navigation', fakeAsync(() => {
+    const fixture = TestBed.createComponent(NzDemoPageHeaderResponsiveComponent);
+    const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
+    fixture.detectChanges();
+    pageHeader.componentInstance.ngAfterViewInit();
+    tick();
+    fixture.detectChanges();
+    const back = pageHeader.nativeElement.querySelector('.ant-page-header-back-button');
+    expect(back as HTMLDivElement).toBeTruthy();
+  }));
+
   it('should content work', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderContentComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));