feat(module:page-header): support standalone component (#8235)

NG-ZORRO · Dec 1, 2023 · aa91486 · aa91486
1 parent 686b6b0
commit aa91486
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 54 deletions.
diff --git a/components/page-header/doc/index.en-US.md b/components/page-header/doc/index.en-US.md
@@ -22,23 +22,25 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 <nz-page-header nzTitle="Page Title"></nz-page-header>
 ```
 
-### nz-page-header
-| Param | Description | Type | Default value | Global Config |
-| ----- | ----------- | ---- | ------------- | ------------- |
-| `[nzGhost]` | Make background transparent | `boolean` | `true` | ✅ |
-| `[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（you need import [RouterModule](https://angular.io/api/router/RouterModule) or register [Location](https://angular.io/api/common/Location)）| - |
+### nz-page-header:standalone
+
+| Param          | Description                 | Type                          | Default value                                                                                                                                                                                                                                 | Global Config |
+| -------------- | --------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `[nzGhost]`    | Make background transparent | `boolean`                     | `true`                                                                                                                                                                                                                                        | ✅            |
+| `[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（you need import [RouterModule](https://angular.io/api/router/RouterModule) or register [Location](https://angular.io/api/common/Location)） | -             |
 
 ### Page header sections
-| Element | Description |
-| ----- | ----- |
-| `nz-page-header-title` | Title section |
-| `nz-page-header-subtitle` | Subtitle section, `[nzTitle]` has high priority |
-| `nz-page-header-content` | Content section, `[nzSubtitle]` has high priority |
-| `nz-page-header-footer` | Footer section |
-| `nz-page-header-tags` |  Tags container after the title |
-| `nz-page-header-extra` | Operating area, at the end of the line of the title line |
-| `nz-breadcrumb[nz-page-header-breadcrumb]` | Breadcrumb section |
-| `nz-avatar[nz-page-header-avatar]` | Avatar section |
+
+| Element                                    | Description                                              |
+| ------------------------------------------ | -------------------------------------------------------- |
+| `nz-page-header-title`                     | Title section                                            |
+| `nz-page-header-subtitle`                  | Subtitle section, `[nzTitle]` has high priority          |
+| `nz-page-header-content`                   | Content section, `[nzSubtitle]` has high priority        |
+| `nz-page-header-footer`                    | Footer section                                           |
+| `nz-page-header-tags`                      | Tags container after the title                           |
+| `nz-page-header-extra`                     | Operating area, at the end of the line of the title line |
+| `nz-breadcrumb[nz-page-header-breadcrumb]` | Breadcrumb section                                       |
+| `nz-avatar[nz-page-header-avatar]`         | Avatar section                                           |
diff --git a/components/page-header/doc/index.zh-CN.md b/components/page-header/doc/index.zh-CN.md
@@ -23,24 +23,25 @@ import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 <nz-page-header nzTitle="Page Title"></nz-page-header>
 ```
 
-### nz-page-header
-| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
-| --- | --- | --- | --- | --- |
-| `[nzGhost]` | 使背景色透明 | `boolean` | `true` | ✅ |
-| `[nzTitle]` | title 文字 | `string \| TemplateRef<void>` | - | - |
-| `[nzSubtitle]` | subTitle 文字 | `string \| TemplateRef<void>` | - | - |
-| `[nzBackIcon]` | 自定义 back icon | `string \| TemplateRef<void>` | - | - |
-| `(nzBack)` | 返回按钮的点击事件 | `EventEmitter<void>` | 未订阅该事件时默认调用 [Location[back]](https://angular.cn/api/common/Location#back)（需要引入 [RouterModule](https://angular.io/api/router/RouterModule) 或者注册 [Location](https://angular.io/api/common/Location)) | - |
+### nz-page-header:standalone
+
+| 参数           | 说明               | 类型                          | 默认值                                                                                                                                                                                                                 | 全局配置 |
+| -------------- | ------------------ | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| `[nzGhost]`    | 使背景色透明       | `boolean`                     | `true`                                                                                                                                                                                                                 | ✅       |
+| `[nzTitle]`    | title 文字         | `string \| TemplateRef<void>` | -                                                                                                                                                                                                                      | -        |
+| `[nzSubtitle]` | subTitle 文字      | `string \| TemplateRef<void>` | -                                                                                                                                                                                                                      | -        |
+| `[nzBackIcon]` | 自定义 back icon   | `string \| TemplateRef<void>` | -                                                                                                                                                                                                                      | -        |
+| `(nzBack)`     | 返回按钮的点击事件 | `EventEmitter<void>`          | 未订阅该事件时默认调用 [Location[back]](https://angular.cn/api/common/Location#back)（需要引入 [RouterModule](https://angular.io/api/router/RouterModule) 或者注册 [Location](https://angular.io/api/common/Location)) | -        |
 
 ### Page header 组成部分
-| 元素 | 说明 |
-| ----- | ----- |
-| `nz-page-header-title` | title 部分，`[nzTitle]` 优先级更高 |
-| `nz-page-header-subtitle` | subtitle 部分，`[nzSubtitle]` 优先级更高 |
-| `nz-page-header-content` | 内容部分 |
-| `nz-page-header-footer` | 底部部分 |
-| `nz-page-header-tags` |  title 旁的 tag 列表容器 |
-| `nz-page-header-extra` | title 的行尾操作区部分 |
-| `nz-breadcrumb[nz-page-header-breadcrumb]` | 面包屑部分 |
-| `nz-avatar[nz-page-header-avatar]` | 头像部分 |
 
+| 元素                                       | 说明                                     |
+| ------------------------------------------ | ---------------------------------------- |
+| `nz-page-header-title`                     | title 部分，`[nzTitle]` 优先级更高       |
+| `nz-page-header-subtitle`                  | subtitle 部分，`[nzSubtitle]` 优先级更高 |
+| `nz-page-header-content`                   | 内容部分                                 |
+| `nz-page-header-footer`                    | 底部部分                                 |
+| `nz-page-header-tags`                      | title 旁的 tag 列表容器                  |
+| `nz-page-header-extra`                     | title 的行尾操作区部分                   |
+| `nz-breadcrumb[nz-page-header-breadcrumb]` | 面包屑部分                               |
+| `nz-avatar[nz-page-header-avatar]`         | 头像部分                                 |
diff --git a/components/page-header/page-header-cells.ts b/components/page-header/page-header-cells.ts
@@ -10,7 +10,8 @@ import { Directive } from '@angular/core';
   exportAs: 'nzPageHeaderTitle',
   host: {
     class: 'ant-page-header-heading-title'
-  }
+  },
+  standalone: true
 })
 export class NzPageHeaderTitleDirective {}
 
@@ -19,7 +20,8 @@ export class NzPageHeaderTitleDirective {}
   exportAs: 'nzPageHeaderSubtitle',
   host: {
     class: 'ant-page-header-heading-sub-title'
-  }
+  },
+  standalone: true
 })
 export class NzPageHeaderSubtitleDirective {}
 
@@ -28,7 +30,8 @@ export class NzPageHeaderSubtitleDirective {}
   exportAs: 'nzPageHeaderContent',
   host: {
     class: 'ant-page-header-content'
-  }
+  },
+  standalone: true
 })
 export class NzPageHeaderContentDirective {}
 
@@ -37,7 +40,8 @@ export class NzPageHeaderContentDirective {}
   exportAs: 'nzPageHeaderTags',
   host: {
     class: 'ant-page-header-heading-tags'
-  }
+  },
+  standalone: true
 })
 export class NzPageHeaderTagDirective {}
 
@@ -46,7 +50,8 @@ export class NzPageHeaderTagDirective {}
   exportAs: 'nzPageHeaderExtra',
   host: {
     class: 'ant-page-header-heading-extra'
-  }
+  },
+  standalone: true
 })
 export class NzPageHeaderExtraDirective {}
 
@@ -55,18 +60,21 @@ export class NzPageHeaderExtraDirective {}
   exportAs: 'nzPageHeaderFooter',
   host: {
     class: 'ant-page-header-footer'
-  }
+  },
+  standalone: true
 })
 export class NzPageHeaderFooterDirective {}
 
 @Directive({
   selector: 'nz-breadcrumb[nz-page-header-breadcrumb]',
-  exportAs: 'nzPageHeaderBreadcrumb'
+  exportAs: 'nzPageHeaderBreadcrumb',
+  standalone: true
 })
 export class NzPageHeaderBreadcrumbDirective {}
 
 @Directive({
   selector: 'nz-avatar[nz-page-header-avatar]',
-  exportAs: 'nzPageHeaderAvatar'
+  exportAs: 'nzPageHeaderAvatar',
+  standalone: true
 })
 export class NzPageHeaderAvatarDirective {}
diff --git a/components/page-header/page-header.component.ts b/components/page-header/page-header.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { Location } from '@angular/common';
+import { Location, NgIf } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -27,6 +27,8 @@ 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 { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { NzPageHeaderBreadcrumbDirective, NzPageHeaderFooterDirective } from './page-header-cells';
 
@@ -78,7 +80,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pageHeader';
     '[class.has-breadcrumb]': 'nzPageHeaderBreadcrumb',
     '[class.ant-page-header-compact]': 'compact',
     '[class.ant-page-header-rtl]': `dir === 'rtl'`
-  }
+  },
+  imports: [NgIf, NzOutletModule, NzIconModule],
+  standalone: true
 })
 export class NzPageHeaderComponent implements AfterViewInit, OnDestroy, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

diff --git a/components/page-header/page-header.module.ts b/components/page-header/page-header.module.ts
@@ -3,13 +3,8 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-
 import {
   NzPageHeaderAvatarDirective,
   NzPageHeaderBreadcrumbDirective,
@@ -34,8 +29,7 @@ const NzPageHeaderCells = [
 ];
 
 @NgModule({
-  imports: [BidiModule, CommonModule, NzOutletModule, NzIconModule],
-  exports: [NzPageHeaderComponent, NzPageHeaderCells],
-  declarations: [NzPageHeaderComponent, NzPageHeaderCells]
+  imports: [NzPageHeaderComponent, NzPageHeaderCells],
+  exports: [NzPageHeaderComponent, NzPageHeaderCells]
 })
 export class NzPageHeaderModule {}