Angular 6 如何使用 Angular Renderer2 添加和删除 class

Question

我正在尝试使用 angular Renderer2 在 HTML 模板中添加和删除 class。我这里遇到的困难：

添加 class 一旦组件将加载
只有所选项目应该具有 class

我在 stackblitz 中创建了一个演示。请click here看代码

谢谢。

<div class="tabs">
<a href="#" (click)="selectTab($event)">Tab 1 </a>
<a href="#" (click)="selectTab($event)">Tab 2 </a>
<a href="#" (click)="selectTab($event)">Tab 3</a>
</div>


constructor(private render:Renderer2){}
selectTab(event:any) {
this.render.addClass(event.target,"test");
}

Answer 1

那[ngClass]="{'test': selectedTab== 1}"

呢

我创建了一个调用 selectedTab 的 ts 变量并声明为数字

在 HTML 我使用了 [ngClass]="{'test': selectedTab== 1}" 所以当 selectedTab = 1 test class 将被添加。

在点击方法上，我调用了 selectTab(2) 发送点击的选项卡参数，并在 ts 中处理了这个函数，比如

selectTab(selectedTab) {
if(selectedTab == 1){
  this.selectedTab = 1;
}else if(selectedTab == 2){
  this.selectedTab = 2;
}else{
  this.selectedTab = 3;
}  }
}

Angular 6 如何使用 Angular Renderer2 添加和删除 class

Angular 6 How to add and remove class using Angular Renderer2

angular

angular6

angular-renderer

angular-renderer2