Question

我添加了一个下拉列表并尝试使用指令打开它但单击不能与@HostListener一起使用。下面是我的角度和HTML代码。

import { Directive, HostListener, HostBinding } from '@angular/core';
@Directive({
  selector: '[appDropdowndirective]'
})
export class DropdowndirectiveDirective {

  constructor() { }

  @HostBinding('class.open')
  isOpen = false;

  @HostListener('click', ['$event'])
  toggleOpen(){
    this.isOpen = !this.isOpen;
  }

}

HTML：

<div class="dropdown" appDropdowndirective>
    <button class="dropdown-toggle btn btn-primary">Kontakt und Support
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Kontakt und Support</a></li>
        <li><a href="#">Kontakt und Support</a></li>
        <li><a href="#">Kontakt und Support</a></li>
    </ul>
</div>

Answer 1

通常当我得到类似的东西时，因为我忘了在我的模块中注册指令

Answer 2

将您的appDropdowndirective放在按钮标记内

<button appDropdowndirective> ....</button>

@HostListener未执行click事件

2 个答案: