Question

我正在尝试使用angular Renderer2添加和删除HTML模板中的类。在这里我面临着困难：

在组件加载后添加类
仅所选项目应具有课程

我已经用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时将添加测试类。

在click方法上，我调用selectTab（2）发送clicked选项卡参数，并在ts这样的ts中处理了此功能

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

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

1 个答案: