Angular下拉指令不起作用

Question

我正在使用Angular 6.0.5和Bootstrap 4.1.1，并且我为dropdowns添加了一个指令。但我无论如何都不能让它工作。我在这里看到了很多类似的问题，但没有一个是针对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中的替代类是什么呢？