Angular中如何实现点击图标时在图标旁显示下拉菜单

效果参考 #

以下是两种可直接落地的实现方案，适配HTML/Sass/TypeScript技术栈：

方案1：无第三方依赖轻量实现 #

适合不需要复杂浮层逻辑的简单场景，总代码量不超过100行。

• 核心逻辑：将图标与菜单包裹在同一容器内，通过getBoundingClientRect计算图标坐标，把菜单固定定位到图标侧边，同时监听全局点击实现外部关闭。

模板代码（HTML） #

<div class="menu-trigger-wrap">
  <button class="icon-btn" (click)="toggleMenu($event)" #triggerRef>
    <i class="icon-more"></i> <!-- 替换为你的图标元素 -->
  </button>
  <div class="side-dropdown" *ngIf="menuOpen" #dropdownRef>
    <div class="dropdown-item">编辑内容</div>
    <div class="dropdown-item">导出数据</div>
    <div class="dropdown-item">删除条目</div>
  </div>
</div>

逻辑代码（TypeScript） #

import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.scss']
})
export class SideMenuComponent {
  menuOpen = false;
  @ViewChild('triggerRef') triggerRef!: ElementRef;
  @ViewChild('dropdownRef') dropdownRef!: ElementRef;

  toggleMenu(e: Event) {
    e.stopPropagation();
    this.menuOpen = !this.menuOpen;
    if (this.menuOpen) {
      setTimeout(() => this.calcPosition());
    }
  }

  @HostListener('document:click', ['$event'])
  closeOnOutsideClick(e: Event) {
    if (!this.menuOpen) return;
    const target = e.target as Node;
    if (
      !this.triggerRef.nativeElement.contains(target) &&
      !this.dropdownRef.nativeElement.contains(target)
    ) {
      this.menuOpen = false;
    }
  }

  private calcPosition() {
    const triggerRect = this.triggerRef.nativeElement.getBoundingClientRect();
    const menuEl = this.dropdownRef.nativeElement;
    // 默认贴图标右侧弹出，4px为菜单与图标的间距
    menuEl.style.top = `${triggerRect.top}px`;
    menuEl.style.left = `${triggerRect.right + 4}px`;
  }
}

样式代码（Sass） #

.menu-trigger-wrap {
  position: relative;
  display: inline-block;
}

.icon-btn {
  border: none;
  background: transparent;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background: #f0f0f0;
  }
  .icon-more {
    display: block;
    width: 20px;
    height: 20px;
    // 替换为你的图标背景
    background: url('/assets/icons/more.svg') center/cover no-repeat;
  }
}

.side-dropdown {
  position: fixed;
  min-width: 128px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
  z-index: 999;
  .dropdown-item {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }
  }
}

方案2：Angular CDK 实现（生产环境推荐） #

适合中大型项目，官方CDK库自带浮层定位、边界检测、滚动跟随、无障碍支持，不需要手动处理坐标计算和兼容问题。

1. 首先安装依赖：

npm install @angular/cdk

2. 在所属模块中导入OverlayModule
3. 模板代码：

<button
  class="icon-btn"
  (click)="menuOpen = true"
  cdkOverlayOrigin
  #menuTrigger="cdkOverlayOrigin"
>
  <i class="icon-more"></i>
</button>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="menuTrigger"
  [cdkConnectedOverlayOpen]="menuOpen"
  [cdkConnectedOverlayPositions]="menuPositions"
  (overlayOutsideClick)="menuOpen = false"
>
  <div class="side-dropdown">
    <div class="dropdown-item">编辑内容</div>
    <div class="dropdown-item">导出数据</div>
    <div class="dropdown-item">删除条目</div>
  </div>
</ng-template>

4. 逻辑代码：

import { ConnectedPosition } from '@angular/cdk/overlay';

// 类内属性
menuOpen = false;
// 定位规则：优先贴右侧弹出，右侧空间不足时自动切到左侧
menuPositions: ConnectedPosition[] = [
  {
    originX: 'end',
    originY: 'top',
    overlayX: 'start',
    overlayY: 'top',
    offsetX: 4
  },
  {
    originX: 'start',
    originY: 'top',
    overlayX: 'end',
    overlayY: 'top',
    offsetX: -4
  }
];

提示：如果需要菜单弹出在图标的上/下/左侧，只需要调整ConnectedPosition的坐标配置即可，CDK会自动处理视口边界检测、页面滚动时的位置跟随，不会出现菜单偏移、被父容器裁切的问题。

注意事项 #

• 不要给浮层菜单使用position: absolute，否则容易被设置了overflow: hidden的父容器裁切，原生方案用fixed定位，CDK方案默认将浮层渲染到body根节点，完全规避该问题
• 触发按钮的点击事件必须加stopPropagation()，否则会冒泡到document直接触发关闭逻辑
• 原生方案如果需要支持页面滚动时菜单位置跟随，需要给window添加scroll事件监听，滚动时重新调用calcPosition()更新坐标即可

内容的提问来源于stack exchange，提问作者Felipe Roman Zegers