Angular 6 Как добавить и удалить класс с помощью Angular Renderer2

Question

Я пытаюсь использовать угловой Renderer2 для добавления и удаления класса в шаблоне HTML. Здесь я сталкиваюсь с трудностями:

1. добавить класс после загрузки компонента
2. Только выбранный предмет должен иметь класс

Я создал демо-версию в stackblitz. Пожалуйста, нажмите здесь, чтобы увидеть код.

Спасибо.

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

Я создал переменную ts, вызывающую selectedTab, и объявил ее как число

в HTML я использовал [ngClass]="{'test': selectedTab== 1}" поэтому, когда selectedTab = 1 тестовый класс будет добавлен.

и по методу клика я вызвал selectTab(2), отправив параметр clicked tab и обработал эту функцию в ts как

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