feat(module:comment): support standalone component (#8266)

Author: ParsaArvanehPA

components/comment/comment-cells.ts

@@ -21,20 +21,23 @@ import {
 
 @Directive({
   selector: 'nz-avatar[nz-comment-avatar]',
-  exportAs: 'nzCommentAvatar'
+  exportAs: 'nzCommentAvatar',
+  standalone: true
 })
 export class NzCommentAvatarDirective {}
 
 @Directive({
   selector: 'nz-comment-content, [nz-comment-content]',
   exportAs: 'nzCommentContent',
-  host: { class: 'ant-comment-content-detail' }
+  host: { class: 'ant-comment-content-detail' },
+  standalone: true
 })
 export class NzCommentContentDirective {}
 
 @Directive({
   selector: '[nzCommentActionHost]',
-  exportAs: 'nzCommentActionHost'
+  exportAs: 'nzCommentActionHost',
+  standalone: true
 })
 export class NzCommentActionHostDirective extends CdkPortalOutlet implements OnInit, OnDestroy, AfterViewInit {
   @Input() nzCommentActionHost?: TemplatePortal | null;
@@ -61,7 +64,8 @@ export class NzCommentActionHostDirective extends CdkPortalOutlet implements OnI
   exportAs: 'nzCommentAction',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-template><ng-content></ng-content></ng-template>'
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+  standalone: true
 })
 export class NzCommentActionComponent implements OnInit {
   @ViewChild(TemplateRef, { static: true }) implicitContent!: TemplateRef<void>;

components/comment/comment.component.ts

@@ -4,6 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgForOf, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -20,7 +21,9 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { NzCommentActionComponent as CommentAction } from './comment-cells';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+
+import { NzCommentActionComponent as CommentAction, NzCommentActionHostDirective } from './comment-cells';
 
 @Component({
   selector: 'nz-comment',
@@ -56,7 +59,9 @@ import { NzCommentActionComponent as CommentAction } from './comment-cells';
   host: {
     '[class.ant-comment]': `true`,
     '[class.ant-comment-rtl]': `dir === "rtl"`
-  }
+  },
+  imports: [NgIf, NzOutletModule, NgForOf, NzCommentActionHostDirective],
+  standalone: true
 })
 export class NzCommentComponent implements OnDestroy, OnInit {
   @Input() nzAuthor?: string | TemplateRef<void>;

components/comment/comment.module.ts

@@ -3,12 +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 {
   NzCommentActionComponent,
   NzCommentActionHostDirective,
@@ -25,8 +21,7 @@ const NZ_COMMENT_CELLS = [
 ];
 
 @NgModule({
-  imports: [BidiModule, CommonModule, NzOutletModule],
-  exports: [NzCommentComponent, ...NZ_COMMENT_CELLS],
-  declarations: [NzCommentComponent, ...NZ_COMMENT_CELLS]
+  imports: [NzCommentComponent, ...NZ_COMMENT_CELLS],
+  exports: [NzCommentComponent, ...NZ_COMMENT_CELLS]
 })
 export class NzCommentModule {}

components/comment/doc/index.en-US.md

@@ -18,21 +18,21 @@ import { NzCommentModule } from 'ng-zorro-antd/comment';
 
 ## API
 
-### nz-comment
+### nz-comment:standalone
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| [nzAuthor] | The element to display as the comment author | `string \| TemplateRef<void>` | - |
-| [nzDatetime] | A datetime element containing the time to be displayed | `string \| TemplateRef<void>` | - |
+| Property     | Description                                            | Type                          | Default |
+| ------------ | ------------------------------------------------------ | ----------------------------- | ------- |
+| [nzAuthor]   | The element to display as the comment author           | `string \| TemplateRef<void>` | -       |
+| [nzDatetime] | A datetime element containing the time to be displayed | `string \| TemplateRef<void>` | -       |
 
-### [nz-comment-avatar]
+### [nz-comment-avatar]:standalone
 
 The element to display as the comment avatar.
 
-### nz-comment-content
+### nz-comment-content:standalone
 
 The main content of the comment.
 
-### nz-comment-action
+### nz-comment-action:standalone
 
 The element items rendered below the comment content.

components/comment/doc/index.zh-CN.md

@@ -19,21 +19,21 @@ import { NzCommentModule } from 'ng-zorro-antd/comment';
 
 ## API
 
-### nz-comment
+### nz-comment:standalone
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| [nzAuthor] | 显示评论的作者 | `string \| TemplateRef<void>` | - |
-| [nzDatetime] | 展示时间描述 | `string \| TemplateRef<void>` | - |
+| Property     | Description    | Type                          | Default |
+| ------------ | -------------- | ----------------------------- | ------- |
+| [nzAuthor]   | 显示评论的作者 | `string \| TemplateRef<void>` | -       |
+| [nzDatetime] | 展示时间描述   | `string \| TemplateRef<void>` | -       |
 
-### [nz-comment-avatar]
+### [nz-comment-avatar]:standalone
 
 要显示为评论头像的元素。
 
-### nz-comment-content
+### nz-comment-content:standalone
 
 评论的主要内容。
 
-### nz-comment-action
+### nz-comment-action:standalone
 
 在评论内容下面呈现的操作项。