Skip to content

Commit 4673926

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:menu): support standalone component (#8242)
1 parent ed0de77 commit 4673926

11 files changed

+125
-94
lines changed

‎components/menu/doc/index.en-US.md

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -34,68 +34,71 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
3434
</ul>
3535
```
3636

37-
### [nz-menu]
37+
### [nz-menu]:standalone
3838

39-
| Param | Description | Type | Default value |
40-
| ----- | ----------- | ---- | ------------- |
41-
| `[nzInlineCollapsed]` | specifies the collapsed status when menu is `inline` mode | `boolean` | - |
42-
| `[nzInlineIndent]` | indent px of `inline` menu item on each level | `number` | `24` |
43-
| `[nzMode]` | type of the menu; `vertical`、 `horizontal`, and `inline` modes are supported | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` |
44-
| `[nzSelectable]` | allow selecting menu items | `boolean` | `true` |
45-
| `[nzTheme]` | color theme of the menu | `'light' \| 'dark'` | `'light'` |
46-
| `(nzClick)` | the Output when click `nz-menu-item` inside nz-menu | `EventEmitter<NzMenuItemDirective>` | |
39+
| Param | Description | Type | Default value |
40+
| --------------------- | ----------------------------------------------------------------------------- | ---------------------------------------- | ------------- |
41+
| `[nzInlineCollapsed]` | specifies the collapsed status when menu is `inline` mode | `boolean` | - |
42+
| `[nzInlineIndent]` | indent px of `inline` menu item on each level | `number` | `24` |
43+
| `[nzMode]` | type of the menu; `vertical`、 `horizontal`, and `inline` modes are supported | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` |
44+
| `[nzSelectable]` | allow selecting menu items | `boolean` | `true` |
45+
| `[nzTheme]` | color theme of the menu | `'light' \| 'dark'` | `'light'` |
46+
| `(nzClick)` | the Output when click `nz-menu-item` inside nz-menu | `EventEmitter<NzMenuItemDirective>` | |
4747

48-
### [nz-menu-item]
48+
### [nz-menu-item]:standalone
4949

50-
| Param | Description | Type | Default value |
51-
| ----- | ----------- | ---- | ------------- |
52-
| `[nzDisabled]` | whether menu item is disabled or not | `boolean` | `false` |
53-
| `[nzSelected]` | whether menu item is selected or not | `boolean` | `false` |
54-
| `[nzMatchRouter]` | whether auto set `nzSelected` according to [routerLink](https://www.angular.io/api/router/RouterLink) | `boolean` | `false` |
55-
| `[nzMatchRouterExact]` | only match when the url matches the link exactly, same as [routerLinkActiveOptions](https://angular.io/api/router/RouterLinkActive#routerLinkActiveOptions) | `boolean` | `false` |
56-
| `[nzDanger]` | display the danger style | `boolean` | `false` |
50+
| Param | Description | Type | Default value |
51+
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------- |
52+
| `[nzDisabled]` | whether menu item is disabled or not | `boolean` | `false` |
53+
| `[nzSelected]` | whether menu item is selected or not | `boolean` | `false` |
54+
| `[nzMatchRouter]` | whether auto set `nzSelected` according to [routerLink](https://www.angular.io/api/router/RouterLink) | `boolean` | `false` |
55+
| `[nzMatchRouterExact]` | only match when the url matches the link exactly, same as [routerLinkActiveOptions](https://angular.io/api/router/RouterLinkActive#routerLinkActiveOptions) | `boolean` | `false` |
56+
| `[nzDanger]` | display the danger style | `boolean` | `false` |
5757

58-
### [nz-submenu]
58+
### [nz-submenu]:standalone
5959

6060
You can set the title of `[nz-submenu]` in the following ways.
6161

6262
```html
6363
<li nz-submenu nzTitle="SubTitle" nzIcon="appstore"></li>
6464

65-
<li nz-submenu><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li>
65+
<li nz-submenu
66+
><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li
67+
>
6668

6769
<li nz-submenu [nzTitle]="titleTpl"></li>
6870
<ng-template #titleTpl><span nz-icon nzType="appstore"></span><span>SubTitle</span></ng-template>
6971
```
7072

71-
| Param | Description | Type | Default value |
72-
| ----- | ----------- | ---- | ------------- |
73-
| `[nzPlacement]` | placement of pop menu | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
74-
| `[nzOpen]` | whether sub menu is open or not, double binding | `boolean` | `false` |
75-
| `[nzDisabled]` | whether sub menu is disabled or not | `boolean` | `false` |
76-
| `[nzTitle]` | set submenu title | `string \| TemplateRef<void>` | - |
77-
| `[nzIcon]` | `icon` type in title | `string` | - |
78-
| `[nzMenuClassName]` | Custom the submenu container's class name | `string` | - |
79-
| `(nzOpenChange)` | nzOpen callback | `EventEmitter<boolean>` | - |
73+
| Param | Description | Type | Default value |
74+
| ------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- | -------------- |
75+
| `[nzPlacement]` | placement of pop menu | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
76+
| `[nzOpen]` | whether sub menu is open or not, double binding | `boolean` | `false` |
77+
| `[nzDisabled]` | whether sub menu is disabled or not | `boolean` | `false` |
78+
| `[nzTitle]` | set submenu title | `string \| TemplateRef<void>` | - |
79+
| `[nzIcon]` | `icon` type in title | `string` | - |
80+
| `[nzMenuClassName]` | Custom the submenu container's class name | `string` | - |
81+
| `(nzOpenChange)` | nzOpen callback | `EventEmitter<boolean>` | - |
8082

81-
### [nz-menu-group]
83+
### [nz-menu-group]:standalone
8284

8385
You can set the title of `[nz-menu-group]` in the following ways.
8486

8587
```html
8688
<li nz-menu-group nzTitle="SubTitle" nzIcon="appstore"></li>
8789

88-
<li nz-menu-group><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li>
90+
<li nz-menu-group
91+
><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li
92+
>
8993

9094
<li nz-menu-group [nzTitle]="titleTpl"></li>
9195
<ng-template #titleTpl><span nz-icon nzType="appstore"></span><span>SubTitle</span></ng-template>
9296
```
9397

94-
| Param | Description | Type | Default value |
95-
| ----- | ----------- | ---- | ------------- |
96-
| `[nzTitle]` | set menu group title | `string \| TemplateRef<void>` | - |
98+
| Param | Description | Type | Default value |
99+
| ----------- | -------------------- | ----------------------------- | ------------- |
100+
| `[nzTitle]` | set menu group title | `string \| TemplateRef<void>` | - |
97101

98-
99-
### [nz-menu-divider]
102+
### [nz-menu-divider]:standalone
100103

101104
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.

‎components/menu/doc/index.zh-CN.md

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -35,67 +35,71 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
3535
</ul>
3636
```
3737

38-
### [nz-menu]
39-
40-
| 参数 | 说明 | 类型 | 默认值 |
41-
| --- | --- | --- | --- |
42-
| `[nzInlineCollapsed]` | `inline` 时菜单是否收起状态 | `boolean` | - |
43-
| `[nzInlineIndent]` | `inline` 模式的菜单缩进宽度 | `number` | `24` |
44-
| `[nzMode]` | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` |
45-
| `[nzSelectable]` | 是否允许选中 | `boolean` | `true` |
46-
| `[nzTheme]` | 主题颜色 | `'light' \| 'dark'` | `'light'` |
47-
| `(nzClick)` | 点击 `nz-menu-item` 输出属性 | `EventEmitter<NzMenuItemDirective>` | |
48-
49-
### [nz-menu-item]
50-
51-
| 参数 | 说明 | 类型 | 默认值 |
52-
| --- | --- | --- | --- |
53-
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
54-
| `[nzSelected]` | 是否被选中 | `boolean` | `false` |
55-
| `[nzMatchRouter]` | 是否根据 [routerLink](https://www.angular.cn/api/router/RouterLink) 自动设定 `nzSelected` | `boolean` | `false` |
38+
### [nz-menu]:standalone
39+
40+
| 参数 | 说明 | 类型 | 默认值 |
41+
| --------------------- | -------------------------------------------- | ---------------------------------------- | ------------ |
42+
| `[nzInlineCollapsed]` | `inline` 时菜单是否收起状态 | `boolean` | - |
43+
| `[nzInlineIndent]` | `inline` 模式的菜单缩进宽度 | `number` | `24` |
44+
| `[nzMode]` | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` |
45+
| `[nzSelectable]` | 是否允许选中 | `boolean` | `true` |
46+
| `[nzTheme]` | 主题颜色 | `'light' \| 'dark'` | `'light'` |
47+
| `(nzClick)` | 点击 `nz-menu-item` 输出属性 | `EventEmitter<NzMenuItemDirective>` | |
48+
49+
### [nz-menu-item]:standalone
50+
51+
| 参数 | 说明 | 类型 | 默认值 |
52+
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
53+
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
54+
| `[nzSelected]` | 是否被选中 | `boolean` | `false` |
55+
| `[nzMatchRouter]` | 是否根据 [routerLink](https://www.angular.cn/api/router/RouterLink) 自动设定 `nzSelected` | `boolean` | `false` |
5656
| `[nzMatchRouterExact]` | 是否路由完整精确匹配, 详见 [routerLinkActiveOptions](https://angular.io/api/router/RouterLinkActive#routerLinkActiveOptions) | `boolean` | `false` |
57-
| `[nzDanger]` | 展示错误状态样式 | `boolean` | `false` |
57+
| `[nzDanger]` | 展示错误状态样式 | `boolean` | `false` |
5858

59-
### [nz-submenu]
59+
### [nz-submenu]:standalone
6060

6161
你可以使用以下三种方式来定义 `nz-submenu` 的标题
6262

6363
```html
6464
<li nz-submenu nzTitle="SubTitle" nzIcon="appstore"></li>
6565

66-
<li nz-submenu><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li>
66+
<li nz-submenu
67+
><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li
68+
>
6769

6870
<li nz-submenu [nzTitle]="titleTpl"></li>
6971
<ng-template #titleTpl><span nz-icon nzType="appstore"></span><span>SubTitle</span></ng-template>
7072
```
7173

72-
| 参数 | 说明 | 类型 | 默认值 |
73-
| --- | --- | --- | --- |
74-
| `[nzPlacement]` | 菜单弹出位置 | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
75-
| `[nzOpen]` | 是否展开，可双向绑定 | `boolean` | `false` |
76-
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
77-
| `[nzTitle]` | 标题内容 | `string \| TemplateRef<void>` | - |
78-
| `[nzIcon]` | 标题中 `icon` 类型 | `string` | - |
79-
| `[nzMenuClassName]` | 自定义子菜单容器类名 | `string` | - |
80-
| `(nzOpenChange)` | 展开回调 | `EventEmitter<boolean>` | - |
74+
| 参数 | 说明 | 类型 | 默认值 |
75+
| ------------------- | -------------------- | ------------------------------------------------------------------------------------------- | -------------- |
76+
| `[nzPlacement]` | 菜单弹出位置 | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` |
77+
| `[nzOpen]` | 是否展开，可双向绑定 | `boolean` | `false` |
78+
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
79+
| `[nzTitle]` | 标题内容 | `string \| TemplateRef<void>` | - |
80+
| `[nzIcon]` | 标题中 `icon` 类型 | `string` | - |
81+
| `[nzMenuClassName]` | 自定义子菜单容器类名 | `string` | - |
82+
| `(nzOpenChange)` | 展开回调 | `EventEmitter<boolean>` | - |
8183

82-
83-
### [nz-menu-group]
84+
### [nz-menu-group]:standalone
8485

8586
你可以使用以下三种方式来定义 `nz-menu-group` 的标题
8687

8788
```html
8889
<li nz-menu-group nzTitle="SubTitle" nzIcon="appstore"></li>
8990

90-
<li nz-menu-group><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li>
91+
<li nz-menu-group
92+
><span title><span nz-icon nzType="appstore"></span><span>SubTitle</span></span></li
93+
>
9194

9295
<li nz-menu-group [nzTitle]="titleTpl"></li>
9396
<ng-template #titleTpl><span nz-icon nzType="appstore"></span><span>SubTitle</span></ng-template>
9497
```
95-
| 参数 | 说明 | 类型 | 默认值 |
96-
| --- | --- | --- | --- |
97-
| `[nzTitle]` | 标题内容 | `string \| TemplateRef<void>` | - |
9898

99-
### [nz-menu-divider]
99+
| 参数 | 说明 | 类型 | 默认值 |
100+
| ----------- | -------- | ----------------------------- | ------ |
101+
| `[nzTitle]` | 标题内容 | `string \| TemplateRef<void>` | - |
102+
103+
### [nz-menu-divider]:standalone
100104

101105
菜单项分割线，只用在弹出菜单内。

‎components/menu/menu-divider.directive.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { Directive, ElementRef } from '@angular/core';
1010
exportAs: 'nzMenuDivider',
1111
host: {
1212
class: 'ant-dropdown-menu-item-divider'
13-
}
13+
},
14+
standalone: true
1415
})
1516
export class NzMenuDividerDirective {
1617
constructor(public elementRef: ElementRef) {}

‎components/menu/menu-group.component.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgIf } from '@angular/common';
67
import {
78
AfterViewInit,
89
ChangeDetectionStrategy,
910
Component,
1011
ElementRef,
1112
Inject,
13+
inject,
1214
Input,
1315
Renderer2,
1416
TemplateRef,
1517
ViewChild,
16-
ViewEncapsulation,
17-
inject
18+
ViewEncapsulation
1819
} from '@angular/core';
1920

21+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
22+
2023
import { NzIsMenuInsideDropDownToken } from './menu.token';
2124

2225
export function MenuGroupFactory(): boolean {
@@ -46,7 +49,9 @@ export function MenuGroupFactory(): boolean {
4649
</div>
4750
<ng-content></ng-content>
4851
`,
49-
preserveWhitespaces: false
52+
preserveWhitespaces: false,
53+
imports: [NzOutletModule, NgIf],
54+
standalone: true
5055
})
5156
export class NzMenuGroupComponent implements AfterViewInit {
5257
@Input() nzTitle?: string | TemplateRef<void>;

‎components/menu/menu-item.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ import { NzSubmenuService } from './submenu.service';
5454
'[style.paddingLeft.px]': `dir === 'rtl' ? null : nzPaddingLeft || inlinePaddingLeft`,
5555
'[style.paddingRight.px]': `dir === 'rtl' ? nzPaddingLeft || inlinePaddingLeft : null`,
5656
'(click)': 'clickMenuItem($event)'
57-
}
57+
},
58+
standalone: true
5859
})
5960
export class NzMenuItemComponent implements OnInit, OnChanges, OnDestroy, AfterContentInit {
6061
static ngAcceptInputType_nzDisabled: BooleanInput;

‎components/menu/menu.directive.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ export function MenuDropDownTokenFactory(): boolean {
8181
'[class.ant-menu-inline]': `!isMenuInsideDropDown && actualMode === 'inline'`,
8282
'[class.ant-menu-inline-collapsed]': `!isMenuInsideDropDown && nzInlineCollapsed`,
8383
'[class.ant-menu-rtl]': `dir === 'rtl'`
84-
}
84+
},
85+
standalone: true
8586
})
8687
export class NzMenuDirective implements AfterContentInit, OnInit, OnChanges, OnDestroy {
8788
static ngAcceptInputType_nzInlineCollapsed: BooleanInput;

‎components/menu/menu.module.ts

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,8 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { OverlayModule } from '@angular/cdk/overlay';
8-
import { PlatformModule } from '@angular/cdk/platform';
9-
import { CommonModule } from '@angular/common';
106
import { NgModule } from '@angular/core';
117

12-
import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
13-
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
14-
import { NzIconModule } from 'ng-zorro-antd/icon';
15-
168
import { NzMenuDividerDirective } from './menu-divider.directive';
179
import { NzMenuGroupComponent } from './menu-group.component';
1810
import { NzMenuItemComponent } from './menu-item.component';
@@ -23,8 +15,7 @@ import { NzSubMenuTitleComponent } from './submenu-title.component';
2315
import { NzSubMenuComponent } from './submenu.component';
2416

2517
@NgModule({
26-
imports: [BidiModule, CommonModule, PlatformModule, OverlayModule, NzIconModule, NzNoAnimationModule, NzOutletModule],
27-
declarations: [
18+
imports: [
2819
NzMenuDirective,
2920
NzMenuItemComponent,
3021
NzSubMenuComponent,

‎components/menu/submenu-inline-child.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7+
import { NgTemplateOutlet } from '@angular/common';
78
import {
89
ChangeDetectionStrategy,
910
Component,
@@ -37,7 +38,9 @@ import { NzMenuModeType } from './menu.types';
3738
class: 'ant-menu ant-menu-inline ant-menu-sub',
3839
'[class.ant-menu-rtl]': `dir === 'rtl'`,
3940
'[@collapseMotion]': 'expandState'
40-
}
41+
},
42+
imports: [NgTemplateOutlet],
43+
standalone: true
4144
})
4245
export class NzSubmenuInlineChildComponent implements OnDestroy, OnInit, OnChanges {
4346
@Input() templateOutlet: TemplateRef<NzSafeAny> | null = null;

‎components/menu/submenu-non-inline-child.component.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7+
import { NgClass, NgTemplateOutlet } from '@angular/common';
78
import {
89
ChangeDetectionStrategy,
910
Component,
@@ -58,7 +59,9 @@ import { NzMenuModeType, NzMenuThemeType } from './menu.types';
5859
'[@zoomBigMotion]': 'expandState',
5960
'(mouseenter)': 'setMouseState(true)',
6061
'(mouseleave)': 'setMouseState(false)'
61-
}
62+
},
63+
imports: [NgClass, NgTemplateOutlet],
64+
standalone: true
6265
})
6366
export class NzSubmenuNoneInlineChildComponent implements OnDestroy, OnInit, OnChanges {
6467
@Input() menuClass: string = '';

0 commit comments

Comments
 (0)