feat(module:page-header): add default behavior for the back button (#…

…3891) close #3421
NG-ZORRO · Aug 9, 2019 · 41bc285 · 41bc285
1 parent b98624b
commit 41bc285
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/components/page-header/doc/index.en-US.md b/components/page-header/doc/index.en-US.md
@@ -28,10 +28,10 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 ### nz-page-header
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |
-| `[nzTitle]` | title string | `string \| TemplateRef<void>` | - |
-| `[nzSubtitle]` | subTitle string | `string \| TemplateRef<void>` | - |
-| `[nzBackIcon]` | custom back icon | `string \| TemplateRef<void>` | - |
-| `(nzBack)` | back icon click event | `EventEmitter<void>` | - |
+| `[nzTitle]` | Title string | `string \| TemplateRef<void>` | - |
+| `[nzSubtitle]` | SubTitle string | `string \| TemplateRef<void>` | - |
+| `[nzBackIcon]` | Custom back icon | `string \| TemplateRef<void>` | - |
+| `(nzBack)` | Back icon click event | `EventEmitter<void>` | Call [Location[back]](https://angular.io/api/common/Location#back) when the event not subscribed |
 
 ### Page header sections
 | Element | Description |

diff --git a/components/page-header/doc/index.zh-CN.md b/components/page-header/doc/index.zh-CN.md
@@ -32,7 +32,7 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 | `[nzTitle]` | title 文字 | `string \| TemplateRef<void>` | - |
 | `[nzSubtitle]` | subTitle 文字 | `string \| TemplateRef<void>` | - |
 | `[nzBackIcon]` | 自定义 back icon | `string \| TemplateRef<void>` | - |
-| `(nzBack)` | 返回按钮的点击事件 | `EventEmitter<void>` | - |
+| `(nzBack)` | 返回按钮的点击事件 | `EventEmitter<void>` | 未订阅该事件时默认调用 [Location[back]](https://angular.cn/api/common/Location#back) |
 
 ### Page header 组成部分
 | 元素 | 说明 |

diff --git a/components/page-header/nz-page-header.component.ts b/components/page-header/nz-page-header.component.ts
@@ -20,6 +20,8 @@ import {
   TemplateRef,
   ViewEncapsulation
 } from '@angular/core';
+
+import { Location } from '@angular/common';
 import { NzPageHeaderFooterDirective } from './nz-page-header-cells';
 
 @Component({
@@ -58,7 +60,7 @@ export class NzPageHeaderComponent implements OnInit, OnChanges {
     NzPageHeaderFooterDirective
   >;
 
-  constructor() {}
+  constructor(private location: Location) {}
 
   ngOnInit(): void {}
 
@@ -70,6 +72,10 @@ export class NzPageHeaderComponent implements OnInit, OnChanges {
   }
 
   onBack(): void {
-    this.nzBack.emit();
+    if (this.nzBack.observers.length) {
+      this.nzBack.emit();
+    } else {
+      this.location.back();
+    }
   }
 }
diff --git a/components/page-header/nz-page-header.spec.ts b/components/page-header/nz-page-header.spec.ts
@@ -1,6 +1,8 @@
+import { Location } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 import { NzDemoPageHeaderActionsComponent } from './demo/actions';
 import { NzDemoPageHeaderBasicComponent } from './demo/basic';
@@ -11,9 +13,10 @@ import { NzPageHeaderComponent } from './nz-page-header.component';
 import { NzPageHeaderModule } from './nz-page-header.module';
 
 describe('NzPageHeaderComponent', () => {
+  let location: Location;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NzPageHeaderModule, NzIconTestModule],
+      imports: [NzPageHeaderModule, NzIconTestModule, RouterTestingModule],
       schemas: [NO_ERRORS_SCHEMA],
       declarations: [
         NzDemoPageHeaderBasicComponent,
@@ -22,6 +25,7 @@ describe('NzPageHeaderComponent', () => {
         NzDemoPageHeaderActionsComponent
       ]
     }).compileComponents();
+    location = TestBed.get(Location);
   }));
 
   it('should basic work', () => {
@@ -40,6 +44,18 @@ describe('NzPageHeaderComponent', () => {
     expect(pageHeader.nativeElement.querySelector('nz-breadcrumb[nz-page-header-breadcrumb]')).toBeTruthy();
   });
 
+  it('should default call location back when nzBack not has observers', () => {
+    const fixture = TestBed.createComponent(NzDemoPageHeaderBreadcrumbComponent);
+    const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));
+    spyOn(location, 'back');
+    fixture.detectChanges();
+    expect(location.back).not.toHaveBeenCalled();
+    const back = pageHeader.nativeElement.querySelector('.ant-page-header-back');
+    (back as HTMLElement).click();
+    fixture.detectChanges();
+    expect(location.back).toHaveBeenCalled();
+  });
+
   it('should content work', () => {
     const fixture = TestBed.createComponent(NzDemoPageHeaderContentComponent);
     const pageHeader = fixture.debugElement.query(By.directive(NzPageHeaderComponent));