Блог

Я пытаюсь использовать директиву для активации раскрывающегося меню в своем проекте Angular. Класс «открыть» устарел с начальной загрузки 3, но в настоящее время я использую начальную загрузку 5 и как использовать класс «показать» вместо «открыть»?

моя Директива:

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

@Directive({
  selector: '[appDropDown]',
})
export class DropDownDirective

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

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

мой HTML-фрагмент из компонента:

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

Спасибо.

Одной из возможностей может быть добавление правила в компонент или глобальный CSS:

 div.btn-group.open ul.dropdown-menu {
  display: block;
} 

Я подозреваю, что ваш HostBinding Hostlistener применяет класс «открыть» к div, в котором находится ваш селектор привязки хоста. Этого само по себе, вероятно, недостаточно с правилами CSS, которые у вас в настоящее время есть в вашем проекте, чтобы отобразить раскрывающийся список.

Чтобы решить аналогичную проблему с самим Angular, а не с помощью простых правил CSS, я сделал следующее:

 @Directive({
  selector: '[dropdownMenu]'
})
export class DropdownMenuDirective {
  private isShown: boolean = false;
  @HostListener('click') toggleOpen() {

    if (this.isShown) {
      this.renderer.removeClass(this.elRef.nativeElement, 'show');
    } else {
      this.renderer.addClass(this.elRef.nativeElement, 'show');
    }

    this.isShown = !this.isShown;
  }

  constructor(private elRef: ElementRef, private renderer: Renderer2) {}
} 

 <button class="navbar-toggler" type="button" dropdownMenu>
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link" href="#" (click)="navigate(false)">Option 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" (click)="navigate(true)">Option 2</a>
    </li>
  </ul>
</div> 

 <div class="btn-group" appDropdown #r="appDropdown" >
  <button  type="button" class="btn btn-primary dropdown-toggle" data-bstoggle="dropdown">
    Manage Recipe <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" [ngClass]="{'show':r.isOpen}">
    <li><a class="dropdown-item" href="#">To shopping list</a></li>
    <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
    <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
  </ul>
</div>
 

В ts файл добавить exportAs вместе с селектором:

 selector: '[appDropdown]',
exportAs:'appDropdown'