Question

我正在尝试使用ng-class组合类。如果save，我想使用firstClass类加something = First。我对角度很新，并且一直在阅读有关如何使用ng-class但尚未找到解决方案。有没有更好的方法来解决这个问题？

<mat-dialog-content>
  <div class="modal-title-box">
    <div id="holdtitle" class="modal-title">Do {{something}}</div>
  </div>
  <div class="modal-content">
    <div class="some-text">Are you sure you want to delete {{something | lowercase}}?</div>
  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button id="cancelBtn" class="cancel" (click)="onNoClick()">Cancel</button>
  <button mat-button id="holdBtn" class="save ng-class= something ='First': 'firstClass' ? 'secondClass'" [mat-dialog-close]="true">Hold</button>
</mat-dialog-actions>

Answer 1

有几种方法可以做到这一点。

<button mat-button class="save" [ngClass]="something === 'First' ? 'firstClass' : 'secondClass'"></button>
<button mat-button class="save" [class.firstClass]="something === 'First'"
    [class.secondClass]="something !== 'First'"></button>

Answer 2

我总觉得ng-class语法难以使用。

<button mat-button id="holdBtn" class="save"
    ng-class="{'firstClass': something == 'First', 'secondClass': something != 'First'}" 
    [mat-dialog-close]="true">Hold</button>

这将始终应用save课程，如果something == 'First'将应用firstClass，则应用secondClass。

Answer 3

看起来您正在使用Angular（v2 +），基于标记中的(click)语法。

您可以通过几种方法来实现使用Angular在元素上动态添加/删除类的功能。

这里要知道的重要一点是ngClass指令设置元素的整个类列表。因此，您可以在同一个字符串中包含多个类，只要它们用空格分隔（就像使用普通class="..."一样）。（例如：[ngClass]="'save firstClass'"会将save类和firstClass类同时应用于元素。

现在，根据条件（例如something === First）...

设置班级列表

使用ngClass指令：

<button [ngClass]="something === First ? 'save firstClass' : 'secondClass'" >
</button>

使用classList属性：

<button [classList]="something === First ? 'save firstClass' : 'secondClass'" >
</button>

注意：使用上述两种方法，可能会影响元素上的现有类。例如，如果您希望总是包含在该元素的类列表中，则需要在三元表达式的两个分支中列出它（在{{1之前）在save）之后。

另一种我认为最好的方法，因为你不会冒这个元素覆盖现有类的风险，就是在组件中完成工作，使用Renderer2来动态:或者来自DOM节点类列表的:，使用@ViewChild访问元素：

使用addClass：

removeClass

这种最终方法是优越的，因为它保留了其他类的保证，但它添加了一些样板添加模板Renderer2并使用export class AppComponent implements DoCheck { something = 'first'; @ViewChild('span') span: ElementRef; constructor(private renderer: Renderer2) {} ngDoCheck() { if (this.something === 'first') { this.renderer.addClass(this.span.nativeElement, 'red-border'); } else { this.renderer.removeClass(this.span.nativeElement, 'red-border'); } } }。假设#ref的值可以更改，我使用@ViewChild生命周期钩子，但是如果该值是静态的，则可以使用不同的生命周期钩子，如DoCheck。

以下是展示所有三种方法的工作应用的链接：https://stackblitz.com/edit/dynamically-change-classes。

如何使用ng-class组合类

3 个答案: