html - 如何制作一个指令，在单击链接时将类“show”bootstrap 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)
}

预计在切换下拉按钮时会添加或删除类节目，但没有任何反应

标签： htmlangulartypescriptbootstrap-4

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