feat: use template menu

.changeset/famous-beers-sip.md

@@ -0,0 +1,6 @@
+---
+'@alauda/ui': minor
+---
+
+feat: select, dropdown, tree-select and autocomplete add animation
+feat: refactor menu component

src/autocomplete/autocomplete.directive.ts

@@ -29,6 +29,7 @@ import {
 } from 'rxjs';
 
 import { BaseTooltip, TooltipTrigger, TooltipType } from '../tooltip';
+import { AnimationType } from '../tooltip/animations';
 import { scrollIntoView } from '../utils';
 
 import { AutocompleteComponent } from './autocomplete.component';
@@ -93,6 +94,8 @@ export class AutoCompleteDirective
   @Input('auiAutocompleteAutoPatch')
   autoPatch = true;
 
+  override animationType: AnimationType = 'scaleY';
+
   private _autocomplete: AutocompleteComponent;
   private focusedSuggestion: SuggestionComponent;
 

src/core/animation/animation-consts.ts

@@ -3,3 +3,8 @@ export enum AnimationDuration {
   Base = '0.24s',
   Fast = '0.2s',
 }
+
+export enum TimingFunction {
+  easeOut = 'cubic-bezier(0, 0, 0.2, 1)',
+  easeInOut = 'cubic-bezier(0.38, 0, 0.24, 1)',
+}

src/date-picker/date-picker/date-picker.template.html

@@ -4,7 +4,7 @@
   [format]="format"
   style="display: flex"
   [auiTooltip]="template"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimType="none"
   auiTooltipType="info"
   auiTooltipClass="date-picker-wrapper"
   [disabled]="!!disabled"

src/date-picker/range-picker/range-picker.template.html

@@ -4,7 +4,7 @@
   [size]="size"
   [value]="value"
   [auiTooltip]="template"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimType="none"
   [disabled]="!!disabled"
   style="display: flex"
   auiTooltipType="info"

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

@@ -23,3 +23,4 @@
     <aui-icon icon="angle_down"></aui-icon>
   </button>
 </div>
+<ng-template #menu><ng-content select="aui-menu"></ng-content></ng-template>

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

@@ -3,7 +3,6 @@ import {
   AfterContentInit,
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
   ContentChildren,
   EventEmitter,
   Input,
@@ -19,7 +18,6 @@ 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';
 
 @Component({
@@ -53,9 +51,6 @@ export class DropdownButtonComponent implements AfterContentInit {
   @Output()
   buttonClick = new EventEmitter<Event>();
 
-  @ContentChild(MenuComponent, { static: true })
-  menu: MenuComponent;
-
   @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,
   ViewContainerRef,
 } from '@angular/core';
-import { takeUntil } from 'rxjs';
 
 import { BaseTooltip, TooltipTrigger, TooltipType } from '../tooltip';
+import { AnimationType } from '../tooltip/animations';
 
 import { DropdownActiveDirective } from './dropdown-active.directive';
-import { MenuComponent } from './menu/menu.component';
 
 @Directive({
   selector: '[auiDropdown]',
@@ -26,6 +24,8 @@ import { MenuComponent } from './menu/menu.component';
     'disabled:auiDropdownDisabled',
     'position:auiDropdownPosition',
     'trigger:auiDropdownTrigger',
+    'context:auiDropdownContext',
+    'content:auiDropdown',
   ],
   providers: [
     {
@@ -35,30 +35,14 @@ import { MenuComponent } from './menu/menu.component';
   ],
   standalone: true,
 })
-export class DropdownDirective extends BaseTooltip implements OnInit {
-  @Input('auiDropdown')
-  get menu() {
-    return this._menu;
-  }
-
-  set menu(value) {
-    if (value === this._menu) {
-      return;
-    }
-    this._menu = value;
-    this.content = value.template;
-  }
-
-  @Input('auiDropdownContext')
-  lazyContentContext: any;
-
+export class DropdownDirective extends BaseTooltip {
   @Input('auiDropdownHideOnClick')
   override hideOnClick = true;
 
   @Output('auiDropdownVisibleChange')
   override visibleChange = new EventEmitter<boolean>();
 
-  private _menu: MenuComponent;
+  override animationType: AnimationType = 'scaleY';
 
   constructor(
     overlay: Overlay,
@@ -73,22 +57,5 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
     this.type = TooltipType.Plain;
     this.position = 'bottom end';
     this.trigger = TooltipTrigger.Click;
-    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,7 +9,6 @@ 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';
@@ -29,7 +28,6 @@ import { SubmenuComponent } from './submenu/submenu.component';
     MenuGroupTitleDirective,
     MenuItemComponent,
     SubmenuComponent,
-    MenuContentDirective,
   ],
   exports: [
     DropdownDirective,
@@ -40,7 +38,6 @@ import { SubmenuComponent } from './submenu/submenu.component';
     MenuGroupTitleDirective,
     MenuItemComponent,
     SubmenuComponent,
-    MenuContentDirective,
   ],
 })
 export class DropdownModule {}

src/dropdown/index.ts

@@ -5,7 +5,6 @@ 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 './submenu/submenu.component';

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,7 +1,7 @@
 <button
   [class]="className"
-  [auiTooltip]="menu.template"
-  auiTooltipAnimationType="scaleY"
+  [auiTooltip]="menu"
+  auiTooltipAnimType="scaleY"
   [auiTooltipDisabled]="disabled"
   [auiTooltipTrigger]="trigger"
   [auiTooltipHideOnClick]="true"
@@ -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/paginator/__snapshots__/paginator.component.spec.ts.snap

@@ -118,6 +118,7 @@ exports[`PaginatorComponent should change page size correctly 1`] = `
         >
           <aui-select>
             <div
+              auitooltipanimtype="scaleY"
               auitooltipposition="bottom start"
               auitooltiptrigger="click"
               auitooltiptype="plain"
@@ -395,6 +396,7 @@ exports[`PaginatorComponent should render current template 1`] = `
         >
           <aui-select>
             <div
+              auitooltipanimtype="scaleY"
               auitooltipposition="bottom start"
               auitooltiptrigger="click"
               auitooltiptype="plain"
@@ -681,6 +683,7 @@ exports[`PaginatorComponent should render current template 2`] = `
         >
           <aui-select>
             <div
+              auitooltipanimtype="scaleY"
               auitooltipposition="bottom start"
               auitooltiptrigger="click"
               auitooltiptype="plain"

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();
+    }
+  }
+}

src/select/multi-select/multi-select.component.html

@@ -3,7 +3,7 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
-  auiTooltipAnimationType="scaleY"
+  auiTooltipAnimType="scaleY"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"

src/select/select.component.html

@@ -7,7 +7,7 @@
   #selectRef
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
-  auiTooltipAnimationType="scaleY"
+  auiTooltipAnimType="scaleY"
   [auiTooltipDisabled]="disabled"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"

src/status-bar/__snapshots__/status-bar.component.spec.ts.snap

@@ -186,8 +186,7 @@ exports[`Status Bar should match snapshot 3`] = `
     >
       <aui-tooltip>
         <div
-          class="ng-trigger ng-trigger-showHide aui-tooltip aui-tooltip--default aui-tooltip--top"
-          style="opacity: 1; transform: scale(1);"
+          class="ng-trigger ng-trigger-showHide aui-tooltip aui-tooltip--default aui-tooltip--top aui-tooltip__transform-origin"
         >
             
           <div

src/time-picker/template.html

@@ -4,7 +4,7 @@
   [class.isClearable]="clearable && timeFormatValue"
   #tooltipRef="auiTooltip"
   [auiTooltip]="template"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimType="none"
   auiTooltipType="plain"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"

src/tooltip/animations.ts

@@ -1,51 +1,75 @@
-import { animate, state, style, transition } from '@angular/animations';
+import { animate, keyframes, style, transition } from '@angular/animations';
+
+import { TimingFunction } from '../core/animation/animation-consts';
+
+const duration = '160ms';
 
 export const scale = [
-  state(
-    'scale-show',
-    style({
-      opacity: 1,
-      transform: 'scale(1)',
-    }),
-  ),
-  state(
-    'scale-hide,void',
-    style({
-      opacity: 0,
-      transform: 'scale(0)',
-    }),
-  ),
   transition('scale-hide => scale-show, void => scale-show', [
-    animate('160ms cubic-bezier(0, 0, 0.2, 1)'),
+    animate(
+      `${duration} ${TimingFunction.easeOut}`,
+      keyframes([
+        style({
+          opacity: 0,
+          transform: 'scale(0)',
+        }),
+        style({
+          opacity: 1,
+          transform: 'scale(1)',
+        }),
+      ]),
+    ),
   ]),
-  transition('scale-show => scale-hide', [
-    animate('160ms cubic-bezier(0.38, 0, 0.24, 1)'),
+  transition('scale-show => scale-hide, scale-show => void', [
+    animate(
+      `${duration} ${TimingFunction.easeInOut}`,
+      keyframes([
+        style({
+          opacity: 1,
+          transform: 'scale(1)',
+        }),
+        style({
+          opacity: 0,
+          transform: 'scale(0)',
+        }),
+      ]),
+    ),
   ]),
 ];
 
 export const scaleY = [
-  state(
-    'scaleY-show',
-    style({
-      opacity: 1,
-      transform: 'scaleY(1)',
-    }),
-  ),
-  state(
-    'scaleY-hide,void',
-    style({
-      opacity: 0,
-      transform: 'scaleY(0)',
-    }),
-  ),
   transition('scaleY-hide => scaleY-show, void => scaleY-show', [
-    animate('160ms cubic-bezier(0, 0, 0.2, 1)'),
+    animate(
+      `${duration} ${TimingFunction.easeOut}`,
+      keyframes([
+        style({
+          opacity: 0,
+          transform: 'scaleY(0)',
+        }),
+        style({
+          opacity: 1,
+          transform: 'scaleY(1)',
+        }),
+      ]),
+    ),
   ]),
-  transition('scaleY-show => scaleY-hide', [
-    animate('160ms cubic-bezier(0.38, 0, 0.24, 1)'),
+  transition('scaleY-show => scaleY-hide, scaleY-show => void', [
+    animate(
+      `${duration} ${TimingFunction.easeInOut}`,
+      keyframes([
+        style({
+          opacity: 1,
+          transform: 'scaleY(1)',
+        }),
+        style({
+          opacity: 0,
+          transform: 'scaleY(0)',
+        }),
+      ]),
+    ),
   ]),
 ];
 
 export const animations = [...scale, ...scaleY];
 
-export type AnimationType = 'scale' | 'scaleY';
+export type AnimationType = 'scale' | 'scaleY' | 'none';

src/tooltip/base-tooltip.ts

@@ -134,8 +134,7 @@ export class BaseTooltip<T = any>
   }
 
   hideOnClick = false;
-  disableAnimation = true;
-  animationType: AnimationType = 'scale';
+  animationType: AnimationType = 'none';
 
   visibleChange = new EventEmitter<boolean>();
 
@@ -255,14 +254,13 @@ export class BaseTooltip<T = any>
       inputContext$: this.inputContext$$.asObservable(),
       inputPosition$: this.inputPosition$$.asObservable(),
       inputType$: this.inputType$$.asObservable(),
-      disableAnimation: this.disableAnimation,
       animationType: this.animationType,
     });
     this.componentIns.hide$.pipe(takeUntil(this.destroy$)).subscribe(() => {
       this._disposeTooltip();
     });
 
-    if (!this.disableAnimation) {
+    if (this.animationType !== 'none') {
       merge(
         this.componentIns.beforeHide$,
         this.componentIns.beforeShow$.pipe(delay(0)),
@@ -329,7 +327,7 @@ export class BaseTooltip<T = any>
   }
 
   hide() {
-    if (this.disableAnimation) {
+    if (this.animationType === 'none') {
       // 如果禁用了动画就立即销毁，而不是等动画完成事件后才销毁
       this._disposeTooltip();
     } else {

src/tooltip/tooltip-copy.directive.ts

@@ -25,9 +25,6 @@ export class TooltipCopyDirective extends BaseTooltip implements OnInit {
   @HostBinding('class.aui-tooltip-copy')
   className = true;
 
-  @Input('auiDisableAnimation')
-  override disableAnimation = false;
-
   @Input()
   get auiTooltipCopy() {
     return this._copyText || this.elRef.nativeElement.textContent;

src/tooltip/tooltip.component.html

@@ -3,7 +3,7 @@
   [class]="class$ | async"
   (mouseenter)="hover$.next(true)"
   (mouseleave)="hover$.next(false)"
-  [@.disabled]="disableAnimation"
+  [@.disabled]="animationType === 'none'"
   [@showHide]="showHide"
   (@showHide.start)="onAnimation($event)"
   (@showHide.done)="onAnimation($event)"

src/tooltip/tooltip.component.ts

@@ -1,7 +1,4 @@
-import {
-  trigger,
-  AnimationEvent,
-} from '@angular/animations';
+import { AnimationEvent, trigger } from '@angular/animations';
 import { NgIf, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -42,7 +39,6 @@ export class TooltipComponent implements OnDestroy {
   template: TemplateRef<any>;
   bem: Bem = buildBem('aui-tooltip');
   showHide = 'scale-hide';
-  disableAnimation = true;
   animationType: AnimationType;
 
   inputContent$: Observable<string | TemplateRef<any>>;
@@ -79,7 +75,6 @@ export class TooltipComponent implements OnDestroy {
     inputPosition$: Observable<string>;
     inputClass$: Observable<string>;
     inputContext$: Observable<any>;
-    disableAnimation?: boolean;
     animationType?: string;
   }) {
     Object.assign(this, inputs);

src/tooltip/tooltip.directive.spec.ts

@@ -196,7 +196,7 @@ describe('TooltipDirective', () => {
       [auiTooltipPosition]="position"
       [auiTooltipTrigger]="trigger"
       [auiTooltipDisabled]="disabled"
-      [auiDisableAnimation]="true"
+      auiTooltipAnimType="none"
       auiTooltipActive="tooltip-actived"
     ></div>
     <ng-template

src/tooltip/tooltip.directive.ts

@@ -28,9 +28,6 @@ export class TooltipDirective extends BaseTooltip {
   @Output('auiTooltipVisibleChange')
   override visibleChange = new EventEmitter<boolean>();
 
-  @Input('auiDisableAnimation')
-  override disableAnimation = false;
-
-  @Input('auiTooltipAnimationType')
-  override animationType: AnimationType;
+  @Input('auiTooltipAnimType')
+  override animationType: AnimationType = 'scale';
 }

src/tree-select/tree-select.component.html

@@ -6,7 +6,7 @@
   #tooltipRef="auiTooltip"
   [auiTooltip]="templateRef"
   [auiTooltipDisabled]="disabled"
-  [auiDisableAnimation]="true"
+  auiTooltipAnimType="scaleY"
   auiTooltipTrigger="click"
   auiTooltipPosition="bottom start"
   auiTooltipType="plain"

stories/dropdown/basic.component.ts

@@ -10,13 +10,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       dropdown
       <aui-icon icon="angle_down"></aui-icon>
     </button>
-    <aui-menu #menu>
-      <aui-menu-item>默认按钮</aui-menu-item>
-      <aui-menu-item type="success">成功按钮</aui-menu-item>
-      <aui-menu-item type="warning">警告按钮</aui-menu-item>
-      <aui-menu-item type="danger">危险按钮</aui-menu-item>
-      <aui-menu-item [disabled]="true">禁用按钮</aui-menu-item>
-    </aui-menu>
+    <ng-template #menu>
+      <aui-menu>
+        <aui-menu-item>默认按钮</aui-menu-item>
+        <aui-menu-item type="success">成功按钮</aui-menu-item>
+        <aui-menu-item type="warning">警告按钮</aui-menu-item>
+        <aui-menu-item type="danger">危险按钮</aui-menu-item>
+        <aui-menu-item [disabled]="true">禁用按钮</aui-menu-item>
+      </aui-menu>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

stories/dropdown/group.component.ts

@@ -10,22 +10,24 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       dropdown
       <aui-icon icon="angle_down"></aui-icon>
     </button>
-    <aui-menu #menu>
-      <aui-menu-group>
-        <span auiMenuGroupTitle>分组一</span>
-        <aui-menu-item>操作一</aui-menu-item>
-        <aui-menu-item>操作二</aui-menu-item>
-      </aui-menu-group>
-      <aui-menu-group>
-        <span auiMenuGroupTitle>分组二</span>
-        <aui-menu-item>操作三</aui-menu-item>
-        <aui-menu-item>操作四</aui-menu-item>
-      </aui-menu-group>
-      <aui-menu-group>
-        <aui-menu-item>操作五</aui-menu-item>
-        <aui-menu-item>操作六</aui-menu-item>
-      </aui-menu-group>
-    </aui-menu>
+    <ng-template #menu>
+      <aui-menu>
+        <aui-menu-group>
+          <span auiMenuGroupTitle>分组一</span>
+          <aui-menu-item>操作一</aui-menu-item>
+          <aui-menu-item>操作二</aui-menu-item>
+        </aui-menu-group>
+        <aui-menu-group>
+          <span auiMenuGroupTitle>分组二</span>
+          <aui-menu-item>操作三</aui-menu-item>
+          <aui-menu-item>操作四</aui-menu-item>
+        </aui-menu-group>
+        <aui-menu-group>
+          <aui-menu-item>操作五</aui-menu-item>
+          <aui-menu-item>操作六</aui-menu-item>
+        </aui-menu-group>
+      </aui-menu>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

stories/dropdown/submenu.component.ts

@@ -10,16 +10,18 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       dropdown
       <aui-icon icon="angle_down"></aui-icon>
     </button>
-    <aui-menu #menu>
-      <aui-menu-item>操作一</aui-menu-item>
-      <aui-menu-item>操作二</aui-menu-item>
-      <aui-submenu>
-        子菜单
-        <aui-menu-item>操作三</aui-menu-item>
-        <aui-menu-item>操作四</aui-menu-item>
-        <aui-menu-item>操作五</aui-menu-item>
-      </aui-submenu>
-    </aui-menu>
+    <ng-template #menu>
+      <aui-menu>
+        <aui-menu-item>操作一</aui-menu-item>
+        <aui-menu-item>操作二</aui-menu-item>
+        <aui-submenu>
+          子菜单
+          <aui-menu-item>操作三</aui-menu-item>
+          <aui-menu-item>操作四</aui-menu-item>
+          <aui-menu-item>操作五</aui-menu-item>
+        </aui-submenu>
+      </aui-menu>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

stories/dropdown/template.component.ts

@@ -20,16 +20,16 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       dropdown 2
       <aui-icon icon="angle_down"></aui-icon>
     </button>
-    <aui-menu #menu>
-      <ng-template
-        auiMenuContent
-        let-canDelete="canDelete"
-      >
+    <ng-template
+      #menu
+      let-canDelete="canDelete"
+    >
+      <aui-menu>
         <aui-menu-item>创建</aui-menu-item>
         <aui-menu-item>更新</aui-menu-item>
         <aui-menu-item *ngIf="canDelete">删除</aui-menu-item>
-      </ng-template>
-    </aui-menu>
+      </aui-menu>
+    </ng-template>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })