Angular 8 使用ngFor实现多级下拉菜单子菜单嵌套问题怎么解决

HTML结构修改 #

将嵌套在一级<a>标签内的子菜单拆分出来，每个一级选项用独立容器包裹，子菜单与一级选项平级，避免a标签嵌套块级元素的语法问题：

<div *ngIf="options?.length >= 1" class="dropdown-menu">   
  <!-- 每个一级选项用容器包裹 -->
  <div *ngFor="let option of options" class="dropdown-item-container">
    <a class="dropdown-item d-flex" 
        (click)="selectOption(option)" 
        [ngStyle]="option.style">
        {{ option.name || option.node_name || option?.product_name || option?.operatorName || option?.batch_number }}
    </a>
    <!-- 子菜单与a标签平级，不再嵌套在a内部 -->
    <div *ngIf="option.sfgProducts?.length >= 1" class="dropdown-submenu">
        <a *ngFor="let suboption of option.sfgProducts" 
        class="dropdown-item d-flex">
            {{ suboption.name }}
        </a>
    </div>
  </div>
</div>

SCSS样式修改 #

调整定位规则，让子菜单悬浮在主菜单右侧外部：

.dropdown-menu{
  background: $onAccent;
  color: $accent;
  padding: 0.5rem;
  border-radius: 8px;
  max-height: 50vh;
  overflow-y: auto;
  left:-25px;
  /* 给主菜单加相对定位，防止子菜单超出视口时错位 */
  position: relative;
}

/* 新增一级选项容器样式 */
.dropdown-item-container {
  position: relative;
}

.dropdown-submenu {
    background: $onAccent;
    color: $accent;
    padding: 0.5rem;
    border-radius: 8px;
    max-height: 50vh;
    overflow-y: auto;
    display: none;
    /* 修改为绝对定位，放在父容器右侧 */
    position: absolute;
    left: 100%;
    top: 0;
    /* 加个小边距避免和主菜单贴太近 */
    margin-left: 4px;
    min-width: 120px;
}
/* 调整hover触发规则，悬停在一级选项容器时显示子菜单 */
.dropdown-item-container:hover > .dropdown-submenu {
    display: block;
}
.dropdown-item {
  cursor: pointer;
  min-height: 2rem;
  display: flex;
  align-items: center;
  color: $accent;
  border-radius: 8px;
  width: 100%;
}

核心修改说明 #

• 移除了子菜单在a标签内的嵌套结构，符合HTML语法规范
• 通过相对+绝对定位组合，让子菜单直接显示在主下拉菜单的右侧外部，不会被主菜单的滚动区域限制
• 调整了hover触发范围，悬停在整个一级选项区域即可唤起子菜单，交互更流畅

内容的提问来源于stack exchange，提问作者Yaditya