Angular Can'；不要打开下拉菜单

我正在沿着我的路线走。我添加了一个下拉指令，如下所示

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

@Directive({
selector:'[appdropdown]'
})
export class DropDownDirective
{
@HostBinding('class.open') isOpen=false;

@HostListener('click') dropdownClick()
{
    this.isOpen = !this.isOpen;
}
}

并将其添加到AppModule中的声明数组中。当我将其添加到app recipe detail组件中的div时，当我单击该按钮时，我不会打开下拉列表

<div class="row">
<div class="col-md-12">
    <div class="btn-group" appdropdown>
        <button type="button" class="btn btn-primary dropdown-toggle" >
            Manage Recipe <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li>
                    <a href="#">To List</a>
                </li>
                <li>
                    <a href="#">Edit Recipe</a>
                </li>
                <li>
                    <a href="#">Delete Recipe</a>
                </li>
            </ul>
    </div>
</div>

管理配方

---

我不知道缺少了什么。

应该可以，检查页面上是否引用了

bootstrap.js

？是的，我确实引用了jquery、popper.js和bootstrap.js