javascript - Angular 2 - 创建指令

Question

有一个下拉菜单工作正常现在我想让这个代码可重用，或者创建指令，因为现在在更多页面中添加了更多下拉菜单

我更喜欢制定指令，但我真的被困在这里

<div class="nav-item has-dropdown">
    <div class="menu-text" (click)="hasDropdown($event)">
        Click me
    </div>
    <div class="has-dropdown-view">
         Dropdown contenthere
    </div>
</div>


hasDropdown(event){
  let target = event.target || event.srcElement || event.currentTarget;
  this.dropownView = !this.dropownView;
  if( this.dropownView  ){
    target.closest('.has-dropdown').classList.add('has-open')
  }else{
    target.closest('.has-dropdown').classList.remove('has-open')
  }
};

stackblitz

如何用指令“method”实现这个点击功能？

Answer 1

我认为这可以解决您的问题:

   import { Directive,ElementRef, HostListener } from '@angular/core';


    @Directive({
        selector: '[hasDropdown]'
    })

    export class HasDropdownDirective {

    constructor(private el: ElementRef) {

        }
        @HostListener('click') onMouseClick() {

           //Place your code here
        }
    }