Javascript 角度：检查元素是否有类，并将类添加到另一个元素中

如何使用Angular检查DOM元素是否有类，然后将类添加到另一个元素

我的模板：

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

登录

如果带有class开关的span也选中了class，，则span元素与classd-table-cell之间的文本颜色应为黑色，否则颜色应为灰色

jQuery没有问题，但我希望以正确的方式执行：）

步骤：为主元素创建模板引用，如下所示： HTML:

在相应的组件中：

@ViewChild('switchSpan') switchSpanElement:ElementRef;

在此之后，您可以像下面这样检查所述元素的类列表：

 if(switchSpanElement:ElementRef.nativeElement.classList.contains('checked')) {
    ...
  }

步骤：在组件中创建一个布尔变量，您也可以在模板中访问它（=不要将其设置为私有）

isSwitchChecked=false

您可以让它在运行更改检测时检查是否添加了该类（，）

步骤：为主元素创建模板引用，如下所示：
HTML:



在相应的组件中：

@ViewChild('switchSpan') switchSpanElement:ElementRef;

在此之后，您可以像下面这样检查所述元素的类列表：

 if(switchSpanElement:ElementRef.nativeElement.classList.contains('checked')) {
    ...
  }

步骤：在组件中创建一个布尔变量，您也可以在模板中访问它（=不要将其设置为私有）
isSwitchChecked=false

您可以让它在运行更改检测时检查是否添加了该类（，）

角度上的方法是，如果可能的话，避免直接的低级DOM操作。将选中的
类绑定到某个模型，并将
d-table-cell
的类绑定到同一个模型。就像这样：

<div class="d-table">
  <ui-switch class="d-table-cell" [class.checked]="someVariable">
    <span class="switch">
      <small></small>
    </span>
  </ui-switch>
  <span class="d-table-cell" [class.active]="someVariable"> 
    sign in
  </span>
</div>

可能将
someVariable
绑定到某个输入的
ngModel
，或者任何逻辑都应该指示开关是否被检查。
如果可能，角度的方法是避免直接的低级DOM操作。将选中的
类绑定到某个模型，并将
d-table-cell
的类绑定到同一个模型。就像这样：

<div class="d-table">
  <ui-switch class="d-table-cell" [class.checked]="someVariable">
    <span class="switch">
      <small></small>
    </span>
  </ui-switch>
  <span class="d-table-cell" [class.active]="someVariable"> 
    sign in
  </span>
</div>

可能将
someVariable
绑定到某个输入的
ngModel
，或者任何逻辑都应该指示是否检查开关。

.gray{
颜色：灰色；
}
布莱克先生{
颜色：黑色；
}

登录

.gray{
颜色：灰色；
}
布莱克先生{
颜色：黑色；
}

登录
为什么不能在这里使用jquery，为什么使dom复杂？为什么不能在这里使用jquery，为什么使dom复杂？？
someVariable: boolean;