Question

当我单击按钮上它包含show类，然后又单击一次show时，表示已经完成，但是现在我的问题是，当我单击按钮<div class="dropdown-menu">上包含{{1 }}类，然后再次单击删除show类

我不想在我的有角项目中添加show，我不想为单击或更改类添加另一个指令。

app.component.ts

bootstrap.js, jquery.js and pooper.js

dropdown.directive.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>

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附加类

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 7时如何在嵌套元素中添加类

2 个答案: