angular - 下拉菜单打不开

Question

我正在关注关于 Angular 的 Udemy 课程。我添加了一个下拉指令，如下所示

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>

我无法弄清楚缺少什么。

标签： angular