如何在Angular中点击下拉菜单时动态为dropdown-menu添加reverse类

你遇到的dropdown-menu查询结果为null的核心原因是：你用*ngIf控制下拉菜单的显隐，当你同步执行this.showDropDown = !this.showDropDown后，Angular的变更检测还未完成，下拉菜单的DOM节点还没被渲染到页面上，此时同步调用document.querySelector自然找不到对应节点。
另外你当前的实现是全局查询类名、每个下拉都要单独维护布尔变量，多下拉场景下不仅会出现选择器冲突，还会产生大量冗余代码。

我们可以把自动判断展开方向的逻辑封装成Angular全局属性指令，不需要每个下拉单独维护状态，直接挂载即可使用。

步骤1：创建指令 #

首先通过Angular CLI生成指令：

ng generate directive directives/auto-reverse-dropdown

步骤2：编写指令逻辑 #

替换指令文件内容如下：

import { Directive, ElementRef, HostListener, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[appAutoReverseDropdown]'
})
export class AutoReverseDropdownDirective {
  // 可自定义阈值，比如底部预留多少像素时触发向上展开
  @Input() bottomThreshold: number = 20;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('click', ['$event.target'])
  onClick(target: HTMLElement) {
    // 只监听下拉开关按钮的点击
    if (!target.closest('.dropdown-toggle')) return;

    // 等待DOM渲染完成后再计算位置，解决获取不到菜单的问题
    setTimeout(() => {
      const dropdownToggle = this.el.nativeElement.querySelector('.dropdown-toggle');
      const dropdownMenu = this.el.nativeElement.querySelector('.dropdown-menu');
      if (!dropdownToggle || !dropdownMenu) return;

      // 计算位置
      const toggleRect = dropdownToggle.getBoundingClientRect();
      const menuHeight = dropdownMenu.offsetHeight;
      const viewportHeight = window.innerHeight;

      // 按钮底部距离视口底部的高度小于菜单高度+阈值时，向上展开
      const remainingHeight = viewportHeight - toggleRect.bottom;
      if (remainingHeight < menuHeight + this.bottomThreshold) {
        this.renderer.addClass(dropdownMenu, 'reverse');
      } else {
        this.renderer.removeClass(dropdownMenu, 'reverse');
      }
    }, 0);
  }
}

步骤3：全局注册指令 #

在你需要使用该指令的模块的declarations数组中加入AutoReverseDropdownDirective，如果要全局通用可以注册在共享模块或者根模块中。

步骤4：使用指令 #

修改你的组件HTML代码，直接在dropdown容器上挂载指令即可，不需要单独维护upwardFlag、也不需要单独写判断逻辑：

<div id="container">
  <!-- 直接加指令即可，可自定义底部阈值 -->
  <div class="dropdown" appAutoReverseDropdown [bottomThreshold]="30">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" #dp (click)="showDropDown = !showDropDown">
      Cool dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu open" role="menu" aria-labelledby="dropdownMenu1" *ngIf="showDropDown" [ngClass]="{'showDropDown': 'open'}">
      <li role="presentation"><a href="#">Action</a></li>
      <li role="presentation"><a href="#">Another action</a></li>
      <li role="presentation"><a href="#">Something else here</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a href="#">Separated link</a></li>
    </ul>
  </div>
</div>

• 自动解决DOM查询为null的问题，通过setTimeout等待变更检测完成后再操作DOM
• 不需要每个下拉单独维护状态变量，没有冗余代码
• 基于当前指令所在元素查询DOM，多下拉场景下不会出现选择器冲突
• 支持自定义底部阈值，适配不同场景需求

内容的提问来源于stack exchange，提问作者Abdur Raziq Khan