Angular Dropdown 指令不起作用

Posted 2023-02-22

【中文标题】Angular Dropdown 指令不起作用

【英文标题】：Angular Dropdown directive doesn't work

【发布时间】：2018-12-17 08:19:27

【问题描述】：

我将 Angular 6.0.5 与 Bootstrap 4.1.1 一起使用，并添加了一个下拉指令。但我不能让它工作。我在这里看到了很多类似的问题，但没有一个是针对 Bootstrap 4 的。 这是下拉html：

<div class="btn-group" appDropdown>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" style="cursor: pointer"
           (click)="OnAddToShoppingList()">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>

这是指令：

import Directive, HostBinding, HostListener from '@angular/core';

@Directive(
  selector: '[appDropdown]'
)
export class DropdownDirective 
  @HostBinding('class.open') isOpen = false;

  @HostListener('click') toggleopen() 
    this.isOpen = !this.isOpen;
  

我怀疑“公开”课程。而且我认为这是 Bootstrap 3 中已弃用的类。那么 Bootstrap 4 中的替代方法是什么？

【问题讨论】：

bootstrap 4 using show class 将您的公开课程更改为显示

@ChellappanV 我试过显示，但它不起作用

【参考方案1】：

为了在引导程序中使用下拉菜单，您需要在两个地方添加 show 类，您可以通过使用角度模板 ref 获取对 isOpen 变量的引用来实现

如果你想得到指令的引用，你需要先导出指令

@Directive(
  selector: '[appDropDown]',
exportAs:'appDropDown'
)

然后你可以使用模板引用方法来实现下拉

<div class="btn-group" appDropDown #r="appDropDown" >
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
    Manage
    <span class="caret"></span></button>
  <ul class="dropdown-menu" [ngClass]="'show':r.isOpen" >
    <li><a class="dropdown-item" style="cursor: pointer"
           >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>

我在这里包含示例，请查看：https://stackblitz.com/edit/angular-h9rgmn

【讨论】：

您是否在指令上创建了本地引用，然后在 ngClass 中使用了指令中属性的当前值？

是的，将 appdropdown 属性绑定到 ng lass

非常感谢！

【参考方案2】：

确保您已将指令导入 app.module.ts 文件