feat: use template menu

src/dropdown/dropdown-button/dropdown-button.component.html

@@ -17,7 +17,7 @@
     [aui-button]="type"
     [plain]="plain"
     [size]="size"
-    [auiDropdown]="menu"
+    [auiDropdown]="menu.template"
     [disabled]="disableTrigger$ | async"
   >
     <aui-icon icon="angle_down"></aui-icon>

src/dropdown/dropdown-button/dropdown-button.component.ts

@@ -19,8 +19,8 @@ import { IconComponent } from '../../icon/icon.component';
 import { ComponentSize } from '../../types';
 import { Bem, buildBem, coerceAttrBoolean } from '../../utils';
 import { DropdownDirective } from '../dropdown.directive';
-import { MenuComponent } from '../menu/menu.component';
 import { MenuItemComponent } from '../menu-item/menu-item.component';
+import { MenuTemplateComponent } from '../menu-template.component';
 
 @Component({
   selector: 'aui-dropdown-button',
@@ -53,8 +53,8 @@ export class DropdownButtonComponent implements AfterContentInit {
   @Output()
   buttonClick = new EventEmitter<Event>();
 
-  @ContentChild(MenuComponent, { static: true })
-  menu: MenuComponent;
+  @ContentChild(MenuTemplateComponent, { static: true })
+  menu: MenuTemplateComponent;
 
   @ContentChildren(MenuItemComponent, { descendants: true })
   private readonly menuItems: QueryList<MenuItemComponent>;

src/dropdown/dropdown.directive.ts

@@ -6,17 +6,15 @@ import {
   EventEmitter,
   Input,
   NgZone,
-  OnInit,
   Output,
   Renderer2,
+  TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
-import { takeUntil } from 'rxjs';
 
 import { BaseTooltip, TooltipTrigger, TooltipType } from '../tooltip';
 
 import { DropdownActiveDirective } from './dropdown-active.directive';
-import { MenuComponent } from './menu/menu.component';
 
 @Directive({
   selector: '[auiDropdown]',
@@ -26,6 +24,7 @@ import { MenuComponent } from './menu/menu.component';
     'disabled:auiDropdownDisabled',
     'position:auiDropdownPosition',
     'trigger:auiDropdownTrigger',
+    'context:auiDropdownContext',
   ],
   providers: [
     {
@@ -35,7 +34,7 @@ import { MenuComponent } from './menu/menu.component';
   ],
   standalone: true,
 })
-export class DropdownDirective extends BaseTooltip implements OnInit {
+export class DropdownDirective extends BaseTooltip {
   @Input('auiDropdown')
   get menu() {
     return this._menu;
@@ -46,19 +45,16 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
       return;
     }
     this._menu = value;
-    this.content = value.template;
+    this.content = value;
   }
 
-  @Input('auiDropdownContext')
-  lazyContentContext: any;
-
   @Input('auiDropdownHideOnClick')
   override hideOnClick = true;
 
   @Output('auiDropdownVisibleChange')
   override visibleChange = new EventEmitter<boolean>();
 
-  private _menu: MenuComponent;
+  private _menu: TemplateRef<any>;
 
   constructor(
     overlay: Overlay,
@@ -76,19 +72,4 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
     this.disableAnimation = false;
     this.animationType = 'scaleY';
   }
-
-  ngOnInit() {
-    this.visibleChange.pipe(takeUntil(this.destroy$)).subscribe(visible => {
-      if (this.menu.lazyContent) {
-        if (visible) {
-          setTimeout(() => {
-            this.menu.lazyContent.attach(this.lazyContentContext);
-            this.updatePosition();
-          });
-        } else {
-          this.menu.lazyContent.detach();
-        }
-      }
-    });
-  }
 }

src/dropdown/dropdown.module.ts

@@ -9,10 +9,10 @@ import { DropdownActiveDirective } from './dropdown-active.directive';
 import { DropdownButtonComponent } from './dropdown-button/dropdown-button.component';
 import { DropdownDirective } from './dropdown.directive';
 import { MenuGroupTitleDirective } from './helper-directives';
-import { MenuContentDirective } from './menu/menu-content.directive';
 import { MenuComponent } from './menu/menu.component';
 import { MenuGroupComponent } from './menu-group/menu-group.component';
 import { MenuItemComponent } from './menu-item/menu-item.component';
+import { MenuTemplateComponent } from './menu-template.component';
 import { SubmenuComponent } from './submenu/submenu.component';
 
 @NgModule({
@@ -29,7 +29,7 @@ import { SubmenuComponent } from './submenu/submenu.component';
     MenuGroupTitleDirective,
     MenuItemComponent,
     SubmenuComponent,
-    MenuContentDirective,
+    MenuTemplateComponent,
   ],
   exports: [
     DropdownDirective,
@@ -40,7 +40,7 @@ import { SubmenuComponent } from './submenu/submenu.component';
     MenuGroupTitleDirective,
     MenuItemComponent,
     SubmenuComponent,
-    MenuContentDirective,
+    MenuTemplateComponent,
   ],
 })
 export class DropdownModule {}

src/dropdown/index.ts

@@ -5,7 +5,7 @@ export * from './dropdown-active.directive';
 export * from './dropdown-button/dropdown-button.component';
 export * from './helper-directives';
 export * from './menu/menu.component';
-export * from './menu/menu-content.directive';
 export * from './menu-group/menu-group.component';
 export * from './menu-item/menu-item.component';
+export * from './menu-template.component';
 export * from './submenu/submenu.component';

src/dropdown/menu-template.component.ts

@@ -0,0 +1,13 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'aui-menu-template',
+  template: `
+    <ng-template let-context><ng-content></ng-content></ng-template>
+  `,
+  standalone: true,
+})
+export class MenuTemplateComponent {
+  @ViewChild(TemplateRef, { static: true })
+  template: TemplateRef<any>;
+}

src/dropdown/menu/menu.component.html

@@ -1,3 +1 @@
-<ng-template>
-  <div [class]="bem.block(size)"><ng-content></ng-content></div>
-</ng-template>
+<div [class]="bem.block(size)"><ng-content></ng-content></div>

src/dropdown/menu/menu.component.scss

@@ -1,10 +1,6 @@
 @import '../../theme/var';
 @import '../../theme/mixin';
 
-aui-menu {
-  display: none;
-}
-
 $max-width: 280px;
 
 $button-size: (

src/dropdown/menu/menu.component.ts

@@ -1,18 +1,13 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
   Input,
-  TemplateRef,
-  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 
 import { ComponentSize } from '../../types';
 import { Bem, buildBem } from '../../utils';
 
-import { MenuContentDirective } from './menu-content.directive';
-
 @Component({
   selector: 'aui-menu',
   templateUrl: './menu.component.html',
@@ -27,10 +22,4 @@ export class MenuComponent {
 
   @Input()
   size: ComponentSize = ComponentSize.Small;
-
-  @ViewChild(TemplateRef, { static: true })
-  template: TemplateRef<any>;
-
-  @ContentChild(MenuContentDirective, { static: true })
-  lazyContent: MenuContentDirective;
 }

src/dropdown/submenu/submenu.component.html

@@ -1,6 +1,6 @@
 <button
   [class]="className"
-  [auiTooltip]="menu.template"
+  [auiTooltip]="menu"
   auiTooltipAnimationType="scaleY"
   [auiTooltipDisabled]="disabled"
   [auiTooltipTrigger]="trigger"
@@ -18,9 +18,8 @@
   ></aui-icon>
 </button>
 
-<aui-menu
-  #menu
-  [size]="size"
->
-  <ng-content select="aui-menu-item"></ng-content>
-</aui-menu>
+<ng-template #menu>
+  <aui-menu [size]="size">
+    <ng-content select="aui-menu-item"></ng-content>
+  </aui-menu>
+</ng-template>

src/select/helper-directives.ts

@@ -1,6 +1,15 @@
-import { Directive } from '@angular/core';
-
-import { MenuContentDirective } from '../dropdown';
+import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import { DOCUMENT } from '@angular/common';
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  Directive,
+  Inject,
+  Injector,
+  OnDestroy,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
 
 @Directive({
   selector: '[auiOptionGroupTitle]',
@@ -17,4 +26,52 @@ export class OptionGroupTitleDirective {}
   exportAs: 'auiOptionContent',
   standalone: true,
 })
-export class OptionContentDirective extends MenuContentDirective {}
+export class OptionContentDirective implements OnDestroy {
+  private portal: TemplatePortal;
+  private outlet: DomPortalOutlet;
+
+  private readonly doc: Document;
+
+  constructor(
+    private readonly templateRef: TemplateRef<unknown>,
+    private readonly appRef: ApplicationRef,
+    private readonly viewContainerRef: ViewContainerRef,
+    private readonly componentFactoryResolver: ComponentFactoryResolver,
+    private readonly injector: Injector,
+    @Inject(DOCUMENT) document: any,
+  ) {
+    this.doc = document;
+  }
+
+  attach(context?: any) {
+    if (this.portal?.isAttached) {
+      return;
+    }
+    if (!this.portal) {
+      this.portal = new TemplatePortal(this.templateRef, this.viewContainerRef);
+    }
+    if (!this.outlet) {
+      this.outlet = new DomPortalOutlet(
+        this.doc.createElement('div'),
+        this.componentFactoryResolver,
+        this.appRef,
+        this.injector,
+      );
+    }
+    const el = this.templateRef.elementRef.nativeElement as HTMLElement;
+    el.parentNode.insertBefore(this.outlet.outletElement, el);
+    this.portal.attach(this.outlet, context);
+  }
+
+  detach() {
+    if (this.portal?.isAttached) {
+      this.portal.detach();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.outlet) {
+      this.outlet.dispose();
+    }
+  }
+}