feat(module:dropdown): improve NzContextMenuService#create() (#7768)

Author: HyperLife1119

components/dropdown/context-menu.service.spec.ts

@@ -49,7 +49,8 @@ describe('context-menu', () => {
     expect(() => {
       const fakeEvent = createMouseEvent('contextmenu', 300, 300);
       const component = fixture.componentInstance;
-      component.nzContextMenuService.create(fakeEvent, component.nzDropdownMenuComponent);
+      const viewRef = component.nzContextMenuService.create(fakeEvent, component.nzDropdownMenuComponent);
+      expect(viewRef).toBeTruthy();
       fixture.detectChanges();
       tick(1000);
       fixture.detectChanges();

components/dropdown/context-menu.service.ts

@@ -5,14 +5,16 @@
 
 import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { Injectable, NgZone } from '@angular/core';
+import { EmbeddedViewRef, Injectable, NgZone } from '@angular/core';
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { filter, first } from 'rxjs/operators';
 
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+
 import { NzContextMenuServiceModule } from './context-menu.service.module';
 import { NzDropdownMenuComponent } from './dropdown-menu.component';
 
-const listOfPositions = [
+const LIST_OF_POSITIONS = [
   new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }),
   new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
   new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'end', overlayY: 'bottom' }),
@@ -28,7 +30,10 @@ export class NzContextMenuService {
 
   constructor(private ngZone: NgZone, private overlay: Overlay) {}
 
-  create($event: MouseEvent | { x: number; y: number }, nzDropdownMenuComponent: NzDropdownMenuComponent): void {
+  create(
+    $event: MouseEvent | { x: number; y: number },
+    nzDropdownMenuComponent: NzDropdownMenuComponent
+  ): EmbeddedViewRef<NzSafeAny> {
     this.close(true);
     const { x, y } = $event;
     if ($event instanceof MouseEvent) {
@@ -37,7 +42,7 @@ export class NzContextMenuService {
     const positionStrategy = this.overlay
       .position()
       .flexibleConnectedTo({ x, y })
-      .withPositions(listOfPositions)
+      .withPositions(LIST_OF_POSITIONS)
       .withTransformOriginOn('.ant-dropdown');
     this.overlayRef = this.overlay.create({
       positionStrategy,
@@ -64,7 +69,7 @@ export class NzContextMenuService {
       )
     );
 
-    this.overlayRef.attach(
+    return this.overlayRef.attach(
       new TemplatePortal(nzDropdownMenuComponent.templateRef, nzDropdownMenuComponent.viewContainerRef)
     );
   }

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

@@ -60,5 +60,5 @@ Create dropdown with contextmenu, the detail can be found in the example above
 
 | Property | Description | Arguments | Return Value |
 | --- | --- | --- | --- |
-| create | create dropdown | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | - |
+| create | create dropdown | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | `EmbeddedViewRef<any>` |
 | close | close dropdown | - | - |

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

@@ -61,5 +61,5 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 
 | 方法/属性 | 说明 | 参数 | 返回 |
 | --- | --- | --- | --- |
-| create | 创建右键菜单 | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | - |
+| create | 创建右键菜单 | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | `EmbeddedViewRef<any>` |
 | close | 关闭右键菜单 | - | - |