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

Posted 2023-02-22

【中文标题】如何在 Angular 的下拉菜单中使用 Show Class

【英文标题】：How to use Show Class on DropDown in Angular

【发布时间】：2021-08-30 10:31:06

【问题描述】：

我正在尝试使用指令来激活我的 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 sn-p：

<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>

谢谢。

【参考方案1】：

一种可能是向组件或全局 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>

【参考方案2】：

<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'