Angular 8 директива для добавления динамического c класса "show". В файл компонента не работает - PullRequest
Новая
       23

Angular 8 директива для добавления динамического c класса "show". В файл компонента не работает

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

Я добавляю пользовательскую директиву appDropdown, которая должна добавить шоу класса в раскрывающийся список и, следовательно, открыть раскрывающийся список меню.

recipe-detail.component. html

<div class="row">
  <div class="col-xs-12">
    <img
      [src]="recipe.imagePath"
      alt="{{ recipe.name }}"
      class="img-responsive"
      style="max-height: 300px;">
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <h1>{{ recipe.name }}</h1>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <div class="dropdown" > 
      <button class="btn btn-primary dropdown-toggle" type="button" aria-haspopup="true" aria-expanded="true">
         Manage Recipe
      </button>
      <div class="dropdown-menu " <!-- I want to add class show here appDropdown is a custom directive ->
           appDropdown
       aria-labelledby="dropdownMenuButton" >
        <a class="dropdown-item" href="#">To Shopping List</a>
        <a class="dropdown-item" href="#">Edit Recipe</a>
        <a class="dropdown-item" href="#">Delete Recipe</a>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    {{ recipe.description }}
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    Ingredients
  </div>
</div>

Это пользовательская директива, которую я использую. чтобы проверить, если выпадающее меню, чтобы закрыть его, в противном случае откройте его. Я не могу понять, в чем проблема.

drop-down.directive.ts 

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

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {
  @HostBinding('class.show') isOpen = false;
  @HostListener('document:click', ['$event']) toggleOpen(event: Event) {
    this.isOpen = this.elRef.nativeElement.contains(event.target) ? !this.isOpen : false;
    console.log('it is clicking');
  }
  constructor(private elRef: ElementRef) {}
}
...