Toggle Bootstrap4 выпадающий с директивой Angular - PullRequest
Новая
       13

Toggle Bootstrap4 выпадающий с директивой Angular

0 голосов
/ 11 марта 2020

Я следую видеоуроку, в котором мы реализуем директиву для переключения bootstrap выпадающего класса show. Но учебник сделан, когда bs3 был крутым, или чем-то еще, потому что использовал другую структуру и классы. Я новичок в этом деле, поэтому у меня возникла проблема, вызванная, но у меня нет идеи, как ее решить.

директива 

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

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

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

использование 

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" appDropdown>
    Manage
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Save Data</a>
    <a class="dropdown-item" href="#">Fetch Data</a>
  </div>
</li>

Проблема в том, что я нажимаю на элемент a, а не div, но не a должен иметь новый класс show, .dropdown-menu Я пытался разместить appDropdown в div, тогда ничего не происходит при событии клика

...