[英]Angular 6 How to add and remove class using Angular Renderer2
I am trying to use angular Renderer2 to add and remove a class in HTML template. 我正在尝试使用angular Renderer2添加和删除HTML模板中的类。 Here I am facing the difficulties: 在这里我面临着困难:
I have created a demo in stackblitz. 我已经在stackblitz中创建了一个演示。 Please click here to see code. 请单击此处查看代码。
Thank you. 谢谢。
<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");
}
what about [ngClass]="{'test': selectedTab== 1}"
怎么样[ngClass]="{'test': selectedTab== 1}"
I have created a ts variable calling selectedTab and declared as number 我已经创建了一个调用selectedTab的ts变量,并声明为number
in HTML I've used [ngClass]="{'test': selectedTab== 1}"
so when selectedTab = 1 test class will be added . 在HTML中,我使用了[ngClass]="{'test': selectedTab== 1}"
因此当selectedTab = 1时将添加测试类。
and on click method I have called selectTab(2) sending clicked tab parameter and handled this function in ts like 在单击方法上,我调用selectTab(2)发送被单击的tab参数,并在ts中处理了此函数
selectTab(selectedTab) {
if(selectedTab == 1){
this.selectedTab = 1;
}else if(selectedTab == 2){
this.selectedTab = 2;
}else{
this.selectedTab = 3;
} }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.