我正在跟踪一个视频教程，其中我们实现了一个指令，以切换引导程序下拉列表的show类。但是，由于使用了不同的结构和类，因此本教程是在bs3很酷的时候制作的。 我是新手，所以遇到了问题，但是却不知道如何解决。

指令

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.show') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
    console.log(this.isOpen);
  }
}

用途

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" appDropdown>
    Manage
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Save Data</a>
    <a class="dropdown-item" href="#">Fetch Data</a>
  </div>
</li>

问题是我单击了a元素，而不是div，但是不是a应该具有一个新的类show，即{{1} } 我尝试将appDropdown放到div上，然后单击事件没有任何反应