feat(module:switch): support standalone component (#8214)

NG-ZORRO · Dec 1, 2023 · 3f6a9ed · 3f6a9ed
1 parent 428c53c
commit 3f6a9ed
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 43 deletions.
diff --git a/components/switch/doc/index.en-US.md b/components/switch/doc/index.en-US.md
@@ -18,23 +18,23 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 ## API
 
-### nz-switch
-
-| Property | Description | Type | Default | Global Config |
-| -------- | ----------- | ---- | ------- | ------------- |
-| `[nzId]` | button id attribute inside the component| `string` | - |
-| `[ngModel]` | determine whether the `nz-switch` is checked, double binding | `boolean` | `false` |
-| `[nzCheckedChildren]` | content to be shown when the state is checked | `string \| TemplateRef<void>` | - |
-| `[nzUnCheckedChildren]` | content to be shown when the state is unchecked | `string \| TemplateRef<void>` | - |
-| `[nzDisabled]` | Disable switch | `boolean` | `false` |
-| `[nzSize]` | the size of the `nz-switch`, options: `default` `small` | `'small' \| 'default'` | `'default'` | ✅ |
-| `[nzLoading]` | loading state of switch | `boolean` | `false` |
-| `[nzControl]` | determine whether fully control state by user  | `boolean` | `false` |
-| `(ngModelChange)` | a callback function, can be executed when the checked state is changing | `EventEmitter<boolean>` | - |
+### nz-switch:standalone
+
+| Property                | Description                                                             | Type                          | Default     | Global Config |
+| ----------------------- | ----------------------------------------------------------------------- | ----------------------------- | ----------- | ------------- |
+| `[nzId]`                | button id attribute inside the component                                | `string`                      | -           |
+| `[ngModel]`             | determine whether the `nz-switch` is checked, double binding            | `boolean`                     | `false`     |
+| `[nzCheckedChildren]`   | content to be shown when the state is checked                           | `string \| TemplateRef<void>` | -           |
+| `[nzUnCheckedChildren]` | content to be shown when the state is unchecked                         | `string \| TemplateRef<void>` | -           |
+| `[nzDisabled]`          | Disable switch                                                          | `boolean`                     | `false`     |
+| `[nzSize]`              | the size of the `nz-switch`, options: `default` `small`                 | `'small' \| 'default'`        | `'default'` | ✅            |
+| `[nzLoading]`           | loading state of switch                                                 | `boolean`                     | `false`     |
+| `[nzControl]`           | determine whether fully control state by user                           | `boolean`                     | `false`     |
+| `(ngModelChange)`       | a callback function, can be executed when the checked state is changing | `EventEmitter<boolean>`       | -           |
 
 #### Methods
 
-| Name | Description |
-| ---- | ----------- |
-| focus() | get focus |
-| blur() | remove focus |
+| Name    | Description  |
+| ------- | ------------ |
+| focus() | get focus    |
+| blur()  | remove focus |
diff --git a/components/switch/doc/index.zh-CN.md b/components/switch/doc/index.zh-CN.md
@@ -19,23 +19,23 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 ## API
 
-### nz-switch
-
-| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
-| --- | --- | --- | --- | --- |
-| `[nzId]` | 组件内部 button 的 id 值 | `string` | - |
-| `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` |
-| `[nzCheckedChildren]` | 选中时的内容 | `string \| TemplateRef<void>` | - |
-| `[nzUnCheckedChildren]` | 非选中时的内容 | `string \| TemplateRef<void>` | - |
-| `[nzDisabled]` | disable 状态 | `boolean` | `false` |
-| `[nzSize]` | 开关大小，可选值：`default` `small` | `'small' \| 'default'` | `'default'` | ✅ |
-| `[nzLoading]` | 加载中的开关 | `boolean` | `false` |
-| `[nzControl]` | 是否完全由用户控制状态 | `boolean` | `false` |
-| `(ngModelChange)` | 当前是否选中的回调 | `EventEmitter<boolean>` | `false` |
+### nz-switch:standalone
+
+| 参数                    | 说明                                | 类型                          | 默认值      | 全局配置 |
+| ----------------------- | ----------------------------------- | ----------------------------- | ----------- | -------- |
+| `[nzId]`                | 组件内部 button 的 id 值            | `string`                      | -           |
+| `[ngModel]`             | 指定当前是否选中，可双向绑定        | `boolean`                     | `false`     |
+| `[nzCheckedChildren]`   | 选中时的内容                        | `string \| TemplateRef<void>` | -           |
+| `[nzUnCheckedChildren]` | 非选中时的内容                      | `string \| TemplateRef<void>` | -           |
+| `[nzDisabled]`          | disable 状态                        | `boolean`                     | `false`     |
+| `[nzSize]`              | 开关大小，可选值：`default` `small` | `'small' \| 'default'`        | `'default'` | ✅       |
+| `[nzLoading]`           | 加载中的开关                        | `boolean`                     | `false`     |
+| `[nzControl]`           | 是否完全由用户控制状态              | `boolean`                     | `false`     |
+| `(ngModelChange)`       | 当前是否选中的回调                  | `EventEmitter<boolean>`       | `false`     |
 
 #### 方法
 
-| 名称 | 描述 |
-| ---- | ----------- |
+| 名称    | 描述     |
+| ------- | -------- |
 | focus() | 获取焦点 |
-| blur() | 移除焦点 |
+| blur()  | 移除焦点 |
diff --git a/components/switch/switch.component.ts b/components/switch/switch.component.ts
@@ -6,6 +6,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 import { ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE } from '@angular/cdk/keycodes';
+import { NgIf } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -27,8 +28,11 @@ import { fromEvent, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { BooleanInput, NzSizeDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
+import { NzWaveModule } from 'ng-zorro-antd/core/wave';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'switch';
 
@@ -73,7 +77,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'switch';
       </span>
       <div class="ant-click-animating-node"></div>
     </button>
-  `
+  `,
+  imports: [NzWaveModule, NzIconModule, NgIf, NzOutletModule],
+  standalone: true
 })
 export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

diff --git a/components/switch/switch.module.ts b/components/switch/switch.module.ts
@@ -3,19 +3,12 @@
  * 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 { NzWaveModule } from 'ng-zorro-antd/core/wave';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-
 import { NzSwitchComponent } from './switch.component';
 
 @NgModule({
-  exports: [NzSwitchComponent],
-  declarations: [NzSwitchComponent],
-  imports: [BidiModule, CommonModule, NzWaveModule, NzIconModule, NzOutletModule]
+  imports: [NzSwitchComponent],
+  exports: [NzSwitchComponent]
 })
 export class NzSwitchModule {}