小编Ali*_* Sh的帖子

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