编辑

Question

我正在使用Angular Material的Tab。我想使用以下方法添加和删除类：

const classotherClustersSelection = document.getElementsByClassName('others');
    Array.from(classotherClustersSelection).forEach(item => {
      item.classList.remove('others');
    })

在更改特定数据时，我想从所有选项卡的选项卡部分中删除类。但是不幸的是，其他包含“ others”类的选项卡被ng-if隐藏，因此我无法直接操作DOM。有什么可能的方法？

Answer 1

问题是* ng如果不隐藏该元素，则它将其从dom中删除。这就是为什么您无法访问该元素的原因。

如果要隐藏某些内容但仍要访问它，则应按样式删除该元素。您可以为此使用类或样式绑定：

样式绑定：

<div [style.display]="conditionForHide ? 'none' : 'initial'">

类绑定：

<div [class.removeClass]="conditionForHide">

对于第二个选项，您需要在样式表中创建类。删除不显示元素的示例：

.conditionForHide {
   opacity: 0;
   pointer-events: none;
   cursor: default;
   width: 0px;
   height: 0px;
   position: absolute;
}

编辑

您不应操纵材料代码。而且angular为您提供了两个选择，可以操纵平面javascript（getElementsByClassName）旁边的代码。

最快的方法是，当触发数据更改时，您可以通过类绑定操作该类：

控制器：

public showClassOthers = true;

onDataChange() {
  // do some tasks
  this.showClassOthers = false;    
}

HTML：

<mat-tab-group>
  <mat-tab label="First" [class.others]="showClassOthers"> Content 1 </mat-tab>
  <mat-tab label="Second" [class.others]="showClassOthers"> Content 2 </mat-tab>
</mat-tab-group>

Answer 2

将ngClass属性添加到您的div中，如下所示：

<div [ngClass]="{others: boolClass}" *ngIf="data==='requiredValue'"></div>

然后在更改数据的地方更改boolClass变量的值：

this.data = 'someOtherValue';
this.boolCass = (this.boolClass)?(this.data==='requiredValue'): false;

现在，该类将从元素中删除。您可以从我的示例中参考https://stackblitz.com/edit/angular-cc6tru

Answer 3

您可以使用ngClass有条件地从DOM元素中添加/删除类。

demo

在演示中，我将更改按钮单击时的数据，并根据值类添加或删除。

我们可以将ngIf显式更改为隐藏在Angular库中吗？

3 个答案:

编辑