Как создать директиву, которая добавляет класс «show» начальной загрузки 4 в неупорядоченный список (который не виден), по нажатию на ссылку?

Question

Мне было дано задание, в котором я должен открыть раскрывающееся меню начальной загрузки 4 по щелчку, создав директиву, которая добавит шоу-класс в неупорядоченный список при нажатии на раскрывающийся список (загрузочный javascript cdn запрещен)

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

HTML-код

    <div class="col-xs-12">
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle"  data-toggle="dropdown">Manage Recipe <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" appDropdown>    <!--this is where i need a class 'show' to be added when the above button is clicked !-->
                <li class="dropdown-item"><a href="#">Add Ingredients to Shopping Lists</a></li>
                <li class="dropdown-item"><a href="#">Edit recipe</a></li>
                <li class="dropdown-item"><a href="#">Delete recipe</a></li>
            </ul>
        </div> 
    </div>
</div>

Угловой код

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

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

export class appDropdown implements  {


 @HostBinding('class.show') isOpen:boolean=false;
 @HostListener('click',['$event.target']) toggleOpen(target){
    this.isOpen=!this.isOpen;
    console.log(this.isOpen);
    console.log(target)
}

Ожидалось, что шоу класса будет добавлено или удалено при переключении кнопки выпадающего меню, но ничего не происходит

Answer 1

Вы можете использовать мета-свойство exportAs в директиве для достижения того, что вы хотите:

Прежде всего, определите директиву

import { Directive, ElementRef, Input, HostBinding, HostListener } from "@angular/core";
@Directive({
  selector: "[appDropdown]",
  exportAs: "myDir"
})
export class DropDownDirective {
  public isShow = false;

  @HostBinding("class.show") get opened() {
    return this.isShow;
  }

  @HostListener("click") open() {
    this.isShow = !this.isShow;
  }
}

, затем в своем компоненте определите ViewChildчтобы получить доступ к кнопке:

export class AppComponent implements AfterViewInit {
  @ViewChild("temp", { static: true }) vc: DropDownDirective;
  ngAfterViewInit() {
    console.log(this.vc.isShow);
  }
}

и, наконец, в вашем html:

<div class="dropdown">
    <button #temp=myDir appDropdown type="button" class="btn btn-primary dropdown-toggle"  data-toggle="dropdown">Manage Recipe <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [class.show]="this.vc.isShow">
        <li class="dropdown-item"><a href="#">Add Ingredients to Shopping Lists</a></li>
        <li class="dropdown-item"><a href="#">Edit recipe</a></li>
        <li class="dropdown-item"><a href="#">Delete recipe</a></li>
    </ul>
</div>

Stackblitz Here