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

Question

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

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

我有一个 View 包含这样的东西:

<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>

如您所见，本次潜水类(class) 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 变量绑定(bind)到应用我的自定义指令的 div 的 class.open 属性的值。

所以这应该意味着如果这次潜水设置了open 类，则该值将为 true，否则将为 false。

这个解释正确吗？

2)这个方法:

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

当用户点击 View 中的这个按钮时执行:

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

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

Answer 1

So it should mean that if this dive have the open class setted the value will be true, otherwise will be false.

其实恰恰相反。如果属性 isOpen 为真，类 open 将被添加到 div。如果为假 - 已删除。

is performed when the user click this button in the view:

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

如果您想专门检查按钮，请使用以下代码:

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