单击 angular 时如何在嵌套元素中添加 class 7

Question

当我点击按钮时它包含 show class 并且在再次点击 show 后删除，我完成了但现在我的问题是当我点击按钮 <div class="dropdown-menu"> 包含 show class 并再次单击删除 show class

我不想在我的 angular 项目中添加 bootstrap.js, jquery.js and pooper.js，我不想使用其他指令来单击或更改 class。

app.component.ts

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
  appDropdown>Action</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

dropdown.directive.ts

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

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

    @HostListener('click') dropdownToggle() {
        this.toggle = !this.toggle;
        console.log('clicked');
    }
}

Answer 1

我建议跳过该指令并使用 ngClass:

HTML

<button type="button" [class.show]="show" class="btn btn-info dropdown-toggle"
                  data-toggle="dropdown" (click)="show=!show">Action</button>

Answer 2

在指令装饰器上使用 exportAs 属性

directive.ts

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

然后创建一个模板变量并将 appDropdown 实例分配给该变量并使用 ngClass

追加 class

component.html

<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
  appDropdown #ref="appDropdown">Action</button>
  <div class="dropdown-menu" [ngClass]="{'show':ref.toggle}"  >
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

示例：https://stackblitz.com/edit/angular-ksaqam

单击 angular 时如何在嵌套元素中添加 class 7

How to add class in nested element when click angular 7

bootstrap-4

angular

angular7