这个 Angular 2 自定义指令究竟是如何工作的？答案

【问题标题】：How exactly works this Angular 2 custom directive?这个 Angular 2 自定义指令究竟是如何工作的？
【发布时间】：2018-01-04 13:21:44
【问题描述】：

我是 Angular 2 的新手，我正在学习有关如何创建自定义指令的教程，但我对它的工作原理有些疑问。

我会尝试解释它做了什么。

我有一个视图包含这样的内容：

<div class="row">
  <div class="col-xs-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 Shopping List</a></li>
        <li><a href="#">Edit Recipe</a></li>
        <li><a href="#">Delete Recipe</a></li>
      </ul>
    </div>
  </div>
</div>

正如你所见，这个具有 btn-group 类的潜水设置了我的自定义 appDropDown

<div
    class="btn-group"
    appDropDown
>

这个自定义指令只是在单击内部按钮时将 open 类添加到此 div（因此 UL 内容由 BootStrap 显示）。

这是我的自定义指令的代码：

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

@Directive({
  selector: '[appDropDown]'
})
export class DropDownDirective {

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

  // listen to a click event:
  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }

}

据我所知，这个指令是这样工作的：

1) 这一行：

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

将 isOpen 变量绑定到应用了我的自定义指令的 div 的 class.open 属性的值。

所以这应该意味着如果这个潜水有 open 类设置该值将为真，否则为假。

这个解释正确吗？

2) 这种方法：

// listen to a click event:
@HostListener('click') toggleOpen() {
  this.isOpen = !this.isOpen;
}

当用户在视图中单击此按钮时执行：

  <button
    type="button"
    class="btn btn-primary dropdown-toggle">Manage Recipe <span class="caret"></span>
  </button>

好的，现在我的疑问是：为什么只有当我点击这个特定按钮而不是当我点击页面中的任何其他按钮时才会执行此方法？

【问题讨论】：

标签： javascript angular angular2-directives angular-directive javascript-framework

【解决方案1】：

所以这应该意味着如果这次潜水有公开课设置值为真，否则为假。

实际上是相反的。如果属性isOpen 为真，则类open 将被添加到div 中。如果为假 - 删除。

当用户在视图中单击此按钮时执行：

实际上，当点击作为您应用指令的元素的子元素的任何元素时会触发它，因为原生事件会冒泡。

如果您想专门检查button，请使用以下代码：

  @HostListener('click', ['$event.target'])
  clicked(element) {
    if (element.classList.contains('dropdown-toggle')) {
      console.log('button clicked');
    }
  }

【讨论】：