angular - 如何在 Angular 的下拉菜单中使用 Show Class

Question

我正在尝试使用指令来激活我的 Angular 项目中的下拉菜单。自 bootstrap 3 以来，“open”类已被弃用，但我目前正在使用 bootstrap 5，以及如何使用“show”类而不是“open”？

我的指令：

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

@Directive({
  selector: '[appDropDown]',
})
export class DropDownDirective

{
  @HostBinding('class.open') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
  constructor() {}
}

我来自组件的 HTML 片段：

<div
      class="btn-group"
      appDropDown>
      <button
        type="button"
        class="btn btn-primary dropdown-toggle ">
        Manage Recipe <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">To Shopping List</a></li>
        <li><a href="#">Edit Recipe</a></li>
        <li><a href="#">Delete Recipe</a></li>
      </ul>
    </div>
  </div>

谢谢。

Answer 1

<div class="btn-group" appDropdown #r="appDropdown" >
  <button  type="button" class="btn btn-primary dropdown-toggle" data-bstoggle="dropdown">
    Manage Recipe <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}">
    <li><a class="dropdown-item" href="#">To shopping list</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>

在ts文件中添加exportAs选择器：

selector: '[appDropdown]',
exportAs:'appDropdown'

Answer 2

一种可能是向组件或全局 CSS 添加规则：

div.btn-group.open ul.dropdown-menu {
  display: block;
}

我怀疑您的 HostBinding + Hostlistener 正在将“open”类应用于您的 HostBinding 选择器所在的 div。对于您当前在项目中拥有的 CSS 规则来显示下拉列表，这本身可能还不够。

为了解决 Angular 本身而不是简单的 CSS 规则的类似问题，我执行了以下操作：

@Directive({
  selector: '[dropdownMenu]'
})
export class DropdownMenuDirective {
  private isShown: boolean = false;
  @HostListener('click') toggleOpen() {

    if (this.isShown) {
      this.renderer.removeClass(this.elRef.nativeElement, 'show');
    } else {
      this.renderer.addClass(this.elRef.nativeElement, 'show');
    }

    this.isShown = !this.isShown;
  }

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

<button class="navbar-toggler" type="button" dropdownMenu>
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" href="#" (click)="navigate(false)">Option 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" (click)="navigate(true)">Option 2</a>
    </li>
  </ul>
</div>