Angular 2 - 创建指令

Question

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

我更喜欢make指令，但我真的卡在这里了

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

Answer 2

好吧，如果您在项目中使用 bootstrap，那么在下拉列表中添加打开的 class 是一种更好的方法。

解决方案Bootstrap 3.3 HTML:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown"
        appDropDown>
      <a href="#"
         class="dropdown-toggle">Manage</a>
      <ul class="dropdown-menu">
        <li>
          <a href="#">Save Data</a>
        </li>
        <li>
          <a href="#">Edit Data</a>
        </li>
      </ul>
    </li>
  </ul>

指令文件

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


@Directive({
  selector: "[appDropDown]",
})
export class DropdownDirective {
  @HostBinding('class.open') isOpen: boolean = false;
  constructor(private elRef: ElementRef, private renderer: Renderer2) {

  }

  @HostListener('click') click(eventData: Event) {
    this.isOpen = !this.isOpen;
  }
}

注意：以上解决方案使用了HostBinding方法，你甚至可以使用ElementRef。

这会自动注入 class 点击打开，您可以在任何地方继续使用相同的 bootstrap 模板。

Angular 2 - 创建指令

Angular 2 - Create Directive

javascript

angular-directive

angular

angular6

angular8