javascript - Angular:检查元素是否有类并将类添加到另一个元素

Question

如果一个 DOM 元素有一个类，我如何用 Angular 检查然后将一个类添加到另一个元素？

我的模板:

<div class="d-table">
  <ui-switch class="d-table-cell">
    <span class="switch">
      <small></small>
    </span>
  </ui-switch>
  <span class="d-table-cell"> 
    sign in
  </span>
</div>

如果具有 switch 类的跨度也有 checked 类，则文本的颜色具有 d-table-cell 类的 span 元素之间应为黑色，否则颜色应为灰色。

jQuery 没问题，但我想以正确的 Angular 方式来做:)

Answer 1

.gray {
  color:gray;
}
.black {
  color: black;
}

<div class="d-table">
	<span class="switch" #switch>
      <small></small>
    </span>
  <span class="d-table-cell" [ngClass]="switch.classList.contains('checked')  ? 'gray' : 'black'"> 
    sign in
  </span>
</div>

我们可以创建模板引用变量，可以在模板中直接访问，获取属性、类等。#switch是模板引用变量

stackblitz