Twitter bootstrap “引导下拉列表”；开放式；角度2中的事件

我试图创建一个指令，它在单击时打开一个引导下拉列表，在鼠标离开时关闭它。 下拉指令代码：

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

@Directive({
  selector: '[rbDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.open') get opened() {
    return this.isOpen;
  }
  @HostListener('click') open(){
    this.isOpen = true;
  }
  @HostListener('mouseleave') close(){
    this.isOpen = false;
  }

  private isOpen = false;

}

然后，在下拉列表li项中，我使用以下指令：

<li class="dropdown" rbdropdown>
  <a href="#" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Login</a></li>
    <li><a href="#">Otg=her</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Logout</a></li>
  </ul>
</li>

---

但是它不工作了…

好吧，愚蠢的问题…IDE更改了li元素中的指令名，我没有注意到它。我遇到了同样的问题，即使指令名是相同的。