typescript Angular Bootstrap下拉指令

Posted 2021-05-21

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#" (click)="onSelect('recipe')">Recipes</a></li>
    <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
  </ul>
  
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown" appDropdown>
      <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Save Data</a></li>
        <li><a href="#">Fetch Data</a></li>
      </ul>
    </li>
  </ul>
  
</div>

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.open') isOpen = false;

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}