Angular：检查元素是否有class，并向另一个元素添加class

Question

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

我的模板：

<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 开关的跨度 也有 class checked，然后span元素与classd-table之间的文本颜色-cell应该是黑色，否则颜色应该是灰色。

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

Answer 1

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

对应组件中：

@ViewChild('switchSpan') switchSpanElement:ElementRef;

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

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

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

isSwitchChecked = false;

并且您可以让它在更改检测运行时检查是否添加了 class (, syntax here)

   class <yourComponent> implements DoCheck
    ...
    ngDoCheck() {
      this.isSwitchChecked =  witchSpanElement:ElementRef.nativeElement.classList.contains('checked');
    }

然后您可以在模板中绑定该布尔变量以将 class 添加到所述范围：

 <span class="d-table-cell" [ngClass]={'some-class':isSwitchChecked}> 
    sign in
  </span>

你可以在css中定义一个class:

.some-class{
   background-color: gray;
}

Answer 2

Angular 方法是尽可能避免直接的低级 DOM 操作。将 checked class 绑定到某个模型，并将 d-table-cell 的 class 绑定到同一模型。像那样:

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

并在 TS

someVariable: boolean;

也许将 someVariable 绑定到某个输入的 ngModel，或者任何逻辑应该决定是否检查开关。

Answer 3

.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

Angular：检查元素是否有class，并向另一个元素添加class

Angular: Check if element has a class and add a class to another element

javascript

jquery

typescript

ng-class

angular