feat(module:image): support standalone component (#8200)

NG-ZORRO · Dec 1, 2023 · 63b8777 · 63b8777
1 parent 125768c
commit 63b8777
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 21 deletions.
diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md
@@ -18,7 +18,7 @@ import { NzImageModule } from 'ng-zorro-antd/image';
 
 ## API
 
-### [nz-image]
+### [nz-image]:standalone
 
 | Property            | Description                                                                                                                                                                                        | Type        | Default | Global Config |
 | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ------------- |
@@ -71,7 +71,7 @@ Other attributes [<img\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Elem
 | next(): void                  | Next image          |
 | close(): void                 | Close image preview |
 
-### NzImageGroupComponent
+### NzImageGroupComponent:standalone
 
 | Property    | Description                                                                                                                     | Type     | Default |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |

diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md
@@ -19,7 +19,7 @@ import { NzImageModule } from 'ng-zorro-antd/image';
 
 ## API
 
-### [nz-image]
+### [nz-image]:standalone
 
 | 参数                | 说明                                                                                                     | 类型        | 默认值  | 支持全局配置 |
 | ------------------- | -------------------------------------------------------------------------------------------------------- | ----------- | ------- | ------------ |
@@ -72,8 +72,8 @@ import { NzImageModule } from 'ng-zorro-antd/image';
 | next(): void                  | 下一张       |
 | close(): void                 | 关闭预览     |
 
-### NzImageGroupComponent
+### NzImageGroupComponent:standalone
 
-| 名称    | 描述                                                                                                                    | 类型       | 默认值 |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------ |----------|---|
-| nzScaleStep | `1 + nzScaleStep` 为缩放放大的每步倍数 | `number` | - |
+| 名称        | 描述                                   | 类型     | 默认值 |
+| ----------- | -------------------------------------- | -------- | ------ |
+| nzScaleStep | `1 + nzScaleStep` 为缩放放大的每步倍数 | `number` | -      |
diff --git a/components/image/image-group.component.ts b/components/image/image-group.component.ts
@@ -13,7 +13,8 @@ import { NzImageDirective } from './image.directive';
   template: '<ng-content></ng-content>',
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
 })
 export class NzImageGroupComponent {
   @Input() nzScaleStep: number | null = null;

diff --git a/components/image/image-preview.component.ts b/components/image/image-preview.component.ts
@@ -4,7 +4,9 @@
  */
 
 import { AnimationEvent } from '@angular/animations';
+import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { OverlayRef } from '@angular/cdk/overlay';
+import { NgForOf, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -25,11 +27,12 @@ import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzDestroyService } from 'ng-zorro-antd/core/services';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { isNotNil } from 'ng-zorro-antd/core/util';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 import { FADE_CLASS_NAME_MAP, NZ_CONFIG_MODULE_NAME } from './image-config';
 import { NzImage, NzImagePreviewOptions } from './image-preview-options';
 import { NzImagePreviewRef } from './image-preview-ref';
-import { NzImageUrl, NzImageScaleStep } from './image.directive';
+import { NzImageScaleStep, NzImageUrl } from './image.directive';
 import { getClientSize, getFitContentPosition, getOffset } from './utils';
 
 export interface NzImageContainerOperation {
@@ -52,6 +55,7 @@ const NZ_DEFAULT_ROTATE = 0;
   selector: 'nz-image-preview',
   exportAs: 'nzImagePreview',
   animations: [fadeMotion],
+  standalone: true,
   template: `
     <div class="ant-image-preview">
       <div tabindex="0" aria-hidden="true" style="width: 0; height: 0; overflow: hidden; outline: none;"></div>
@@ -125,6 +129,7 @@ const NZ_DEFAULT_ROTATE = 0;
     tabindex: '-1',
     role: 'document'
   },
+  imports: [NgForOf, NzIconModule, CdkDragHandle, CdkDrag, NgIf],
   providers: [NzDestroyService]
 })
 export class NzImagePreviewComponent implements OnInit {

diff --git a/components/image/image.directive.ts b/components/image/image.directive.ts
@@ -39,7 +39,8 @@ export type NzImageScaleStep = number;
   exportAs: 'nzImage',
   host: {
     '(click)': 'onPreview()'
-  }
+  },
+  standalone: true
 })
 export class NzImageDirective implements OnInit, OnChanges, OnDestroy {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

diff --git a/components/image/image.module.ts b/components/image/image.module.ts
@@ -3,25 +3,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzPipesModule } from 'ng-zorro-antd/pipes';
-
 import { NzImageGroupComponent } from './image-group.component';
 import { NzImagePreviewComponent } from './image-preview.component';
 import { NzImageDirective } from './image.directive';
 import { NzImageService } from './image.service';
 
 @NgModule({
-  imports: [BidiModule, OverlayModule, PortalModule, DragDropModule, CommonModule, NzIconModule, NzPipesModule],
+  imports: [NzImageDirective, NzImagePreviewComponent, NzImageGroupComponent],
   exports: [NzImageDirective, NzImagePreviewComponent, NzImageGroupComponent],
-  providers: [NzImageService],
-  declarations: [NzImageDirective, NzImagePreviewComponent, NzImageGroupComponent]
+  providers: [NzImageService]
 })
 export class NzImageModule {}