Skip to content
Permalink
Browse files

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

…3891)

close #3421
  • Loading branch information...
hsuanxyz authored and wendzhue committed Aug 9, 2019
1 parent b98624b commit 41bc28597ea94f70260359ec8bb065bf37338e68
@@ -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 |
@@ -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 组成部分
| 元素 | 说明 |
@@ -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();
}
}
}
@@ -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));

0 comments on commit 41bc285

Please sign in to comment.
You can’t perform that action at this time.