Angular Dropdown指令不起作用

Question

我将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中的替代方法是什么？

Answer 1

为了在引导程序中工作，需要在两个位置添加show类，可以通过使用角度模板ref获取对isOpen变量的引用来实现

如果要获取指令的引用，则需要先导出指令

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

然后，您可以使用模板ref方法来实现下拉菜单

<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