feat(module:empty): support standalone component (#8254)

NG-ZORRO · Dec 4, 2023 · 15636d2 · 15636d2
1 parent e742e39
commit 15636d2
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 35 deletions.
diff --git a/components/empty/doc/index.en-US.md b/components/empty/doc/index.en-US.md
@@ -18,27 +18,27 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty';
 
 ## API
 
-### nz-empty
+### nz-empty:standalone
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzNotFoundImage]` | Customize image. Will tread as image url when string provided | `string \| TemplateRef<void>` | - |
-| `[nzNotFoundContent]` | Custom description | `string \| TemplateRef<void> \| null` | - |
-| `[nzNotFoundFooter]` | Custom Footer | `string \| TemplateRef<void>` | - |
+| Property              | Description                                                   | Type                                  | Default |
+| --------------------- | ------------------------------------------------------------- | ------------------------------------- | ------- |
+| `[nzNotFoundImage]`   | Customize image. Will tread as image url when string provided | `string \| TemplateRef<void>`         | -       |
+| `[nzNotFoundContent]` | Custom description                                            | `string \| TemplateRef<void> \| null` | -       |
+| `[nzNotFoundFooter]`  | Custom Footer                                                 | `string \| TemplateRef<void>`         | -       |
 
 ### `NZ_CONFIG`
 
 The `nzEmpty` interface has properties as follows:
 
-| Properties | Description | Type |
-| ----- | --- | ---- |
+| Properties              | Description                                                                                             | Type                                                |
+| ----------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
 | `nzDefaultEmptyContent` | User default empty component. You can restore the system default empty content by providing `undefined` | `Type<any>\|TemplateRef<string>\|string\|undefined` |
 
 ### InjectionToken
 
-| Token | Description | Parameters |
-| ----- | --- | ---- |
-| `NZ_EMPTY_COMPONENT_NAME` | Would be injected to `NZ_DEFAULT_EMPTY_CONTENT`, telling that component its parent component's name | `string` |
+| Token                     | Description                                                                                         | Parameters |
+| ------------------------- | --------------------------------------------------------------------------------------------------- | ---------- |
+| `NZ_EMPTY_COMPONENT_NAME` | Would be injected to `NZ_DEFAULT_EMPTY_CONTENT`, telling that component its parent component's name | `string`   |
 
 ### Global Customizable Empty Content
 
@@ -53,4 +53,4 @@ You may notice or used some inputs like `nzNotFoundContent` in some components.
     }
   }
 }
-```
+```
diff --git a/components/empty/doc/index.zh-CN.md b/components/empty/doc/index.zh-CN.md
@@ -19,29 +19,28 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty';
 
 ## API
 
-### nz-empty
+### nz-empty:standalone
 
-| 参数 | 说明 | 类型 | 默认值 |
-| -------- | ----------- | ---- | ------- |
-| `[nzNotFoundImage]` | 设置显示图片，为 `string` 时表示自定义图片地址 | `string \| TemplateRef<void>` | - |
-| `[nzNotFoundContent]` | 自定义描述内容 | `string \| TemplateRef<void> \| null` | - |
-| `[nzNotFoundFooter]` | 设置自定义 footer | `string \| TemplateRef<void>` | - |
+| 参数                  | 说明                                           | 类型                                  | 默认值 |
+| --------------------- | ---------------------------------------------- | ------------------------------------- | ------ |
+| `[nzNotFoundImage]`   | 设置显示图片，为 `string` 时表示自定义图片地址 | `string \| TemplateRef<void>`         | -      |
+| `[nzNotFoundContent]` | 自定义描述内容                                 | `string \| TemplateRef<void> \| null` | -      |
+| `[nzNotFoundFooter]`  | 设置自定义 footer                              | `string \| TemplateRef<void>`         | -      |
 
 ### `NZ_CONFIG`
 
 `nzEmpty` 接口有如下字段：
 
-| 参数 | 说明 | 类型 |
-| ----- | --- | ---- |
+| 参数                    | 说明                                                                | 类型                                                |
+| ----------------------- | ------------------------------------------------------------------- | --------------------------------------------------- |
 | `nzDefaultEmptyContent` | 用户自定义的全局空组件，可通过 `undefined` 来取消自定义的全局空组件 | `Type<any>\|TemplateRef<string>\|string\|undefined` |
 
 ### InjectionToken
 
-| Token | 说明 | 参数 |
-| ----- | --- | ---- |
+| Token                     | 说明                                                             | 参数     |
+| ------------------------- | ---------------------------------------------------------------- | -------- |
 | `NZ_EMPTY_COMPONENT_NAME` | 将会被注入到用户的全局自定义空组件中，告诉该组件其所在组件的名称 | `string` |
 
 ### 全局自定义空组件
 
 你或许知道或者用过一些类似 `nzNotFoundContent` 的属性来自定义组件数据为空时的内容，现在它们都会使用 `Empty` 组件。你可以通过在 `NZ_CONFIG` 中提供 `{ empty: { nzDefaultEmptyContent: something } }` 来定义一个自定义的全局空组件。
-
diff --git a/components/empty/embed-empty.component.ts b/components/empty/embed-empty.component.ts
@@ -3,7 +3,8 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ComponentPortal, Portal, TemplatePortal } from '@angular/cdk/portal';
+import { ComponentPortal, Portal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
+import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -26,6 +27,7 @@ import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 import { NzEmptyCustomContent, NzEmptySize, NZ_EMPTY_COMPONENT_NAME } from './config';
+import { NzEmptyComponent } from './empty.component';
 
 function getEmptySize(componentName: string): NzEmptySize {
   switch (componentName) {
@@ -61,7 +63,9 @@ type NzEmptyContentType = 'component' | 'template' | 'string';
         {{ content }}
       </ng-container>
     </ng-container>
-  `
+  `,
+  imports: [NzEmptyComponent, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, PortalModule],
+  standalone: true
 })
 export class NzEmbedEmptyComponent implements OnChanges, OnInit, OnDestroy {
   @Input() nzComponentName?: string;

diff --git a/components/empty/empty.component.ts b/components/empty/empty.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -18,8 +19,12 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzEmptyI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 
+import { NzEmptyDefaultComponent } from './partial/default';
+import { NzEmptySimpleComponent } from './partial/simple';
+
 const NzEmptyDefaultImages = ['default', 'simple'] as const;
 type NzEmptyNotFoundImageType = typeof NzEmptyDefaultImages[number] | null | string | TemplateRef<void>;
 
@@ -51,7 +56,9 @@ type NzEmptyNotFoundImageType = typeof NzEmptyDefaultImages[number] | null | str
   `,
   host: {
     class: 'ant-empty'
-  }
+  },
+  imports: [NgIf, NzOutletModule, NzEmptyDefaultComponent, NzEmptySimpleComponent],
+  standalone: true
 })
 export class NzEmptyComponent implements OnChanges, OnInit, OnDestroy {
   @Input() nzNotFoundImage: NzEmptyNotFoundImageType = 'default';

diff --git a/components/empty/empty.module.ts b/components/empty/empty.module.ts
@@ -3,22 +3,15 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzI18nModule } from 'ng-zorro-antd/i18n';
-
 import { NzEmbedEmptyComponent } from './embed-empty.component';
 import { NzEmptyComponent } from './empty.component';
 import { NzEmptyDefaultComponent } from './partial/default';
 import { NzEmptySimpleComponent } from './partial/simple';
 
 @NgModule({
-  imports: [BidiModule, CommonModule, PortalModule, NzOutletModule, NzI18nModule],
-  declarations: [NzEmptyComponent, NzEmbedEmptyComponent, NzEmptyDefaultComponent, NzEmptySimpleComponent],
+  imports: [NzEmptyComponent, NzEmbedEmptyComponent, NzEmptyDefaultComponent, NzEmptySimpleComponent],
   exports: [NzEmptyComponent, NzEmbedEmptyComponent]
 })
 export class NzEmptyModule {}
diff --git a/components/empty/partial/default.ts b/components/empty/partial/default.ts
@@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
   encapsulation: ViewEncapsulation.None,
   selector: 'nz-empty-default',
   exportAs: 'nzEmptyDefault',
+  standalone: true,
   template: `
     <svg
       class="ant-empty-img-default"

diff --git a/components/empty/partial/simple.ts b/components/empty/partial/simple.ts
@@ -25,6 +25,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
         </g>
       </g>
     </svg>
-  `
+  `,
+  standalone: true
 })
 export class NzEmptySimpleComponent {}