Angular 2自定义指令的工作原理是什么？

我很新Angular 2我正在关注如何创建一个自定义指令的教程，我对它是如何工作的有些怀疑。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-组有我的自定义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; 
    } 

}

从我可以undestood这个指令以这种方式工作：

1）这条线：

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

约束isOpen变量的值为class.open div的属性，我的习惯m指令被应用。

所以它应该意味着如果这个潜水有开放类设置的值将是真实的，否则将是错误的。

这个解释是否正确？

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>

好了，现在是我的疑问：为什么这Methis Hotel酒店只有当我执行点击这个特定的按钮，而不是当我的网页中的任何其他按钮被点击？

来源

2017-07-28 AndreaNobili

因此，这应该意味着如果这个潜水设置了公开课，的值将是真实的，否则将是错误的。

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

当用户在视图中单击该按钮进行：

实际上，它会当有任何元素上的点击是材料对你所申请到一个孩子被触发指令，因为本地事件泡沫。

如果您要检查的button具体而言，使用下面的代码：

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

来源

2017-07-28 13:17:00

Angular 2自定义指令的工作原理是什么？

回答

相关问题