Question

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

当单击内部按钮时，此自定义指令只是将打开类添加到此div中（因此BootStrap显示UL内容）。

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

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 属性的值。

所以它应该意味着如果此潜水设置了打开类，则该值将为true，否则将为false。

这种解释是否正确？

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>

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

Answer 1

所以它应该意味着如果这次潜水有开放课程设置了值将为true，否则将为false。

实际上它反过来了。如果属性isOpen为true，则类open将添加到div中。如果错误 - 删除。

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

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

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

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

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

1 个答案: