Angular 下拉指令不起作用

Question

我正在使用 Angular 6.0.5 和 Bootstrap 4.1.1，并且我添加了一个下拉指令。但我无法让它发挥作用。我在这里看到了很多类似的问题，但是 none 是针对 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;
  }
}

我怀疑"open" class。我认为这是 Bootstrap 3 中已弃用的 class。那么 Bootstrap 4 中的替代方案是什么？

Answer 1

为了在 bootstrap 中使用下拉菜单，您需要在两个地方添加 show class，您可以使用 angular 模板引用来获取对 isOpen 变量的引用来实现。 =13=]

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

@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

Answer 2

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

Angular 下拉指令不起作用

Angular Dropdown directive doesn't work

angular-directive

bootstrap-4

angular

angular6