Angular 2 - 创建指令答案

【问题标题】：Angular 2 - Create DirectiveAngular 2 - 创建指令
【发布时间】：2019-11-30 07:15:55
【问题描述】：

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

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

<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'实现这个点击功能？

【问题讨论】：

创建指令有什么问题？
如何用指令方法实现这个点击功能？
我认为有几十篇文章可能对您有用...

标签： javascript angular angular6 angular-directive angular8

【解决方案1】：

如果您在项目中使用引导程序，那么有一种更好的方法可以在下拉列表中添加开放类。

解决方案 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。

这会在单击时自动注入打开的类，并且您可以在任何地方继续使用相同的引导模板。

【讨论】：

【解决方案2】：

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

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


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

    export class HasDropdownDirective {

    constructor(private el: ElementRef) {

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

           //Place your code here
        }
    }

【讨论】：