угловой 2 - как переключить имя класса

Question

У меня есть эта вкладка и компонент панели. теперь он отлично работает. Однако сейчас, где бы я ни находился, только первая вкладка будет иметь активный класс. Я хочу указать имя класса active на вкладку «Щелчок». И вкладки, которые не нажаты, не будут иметь имя класса active. Как бы вы это

@Component({ 
    template: ` 
     <div class="topicCreator"> 
      <ul class="nav nav-tabs"> 
       <li role="presentation" class="nav-item active" (click)="show('showDiscussion')"> 
        <a class="nav-link active">Discussion</a> 
       </li> 
       <li role="presentation" class="nav-item" (click)="show('showEvent')"> 
        <a class="nav-link">Event</a> 
       </li> 
       <li role="presentation" class="nav-item" (click)="show('showPoll')"> 
        <a class="nav-link">Poll</a> 
       </li> 
      </ul> 
      <CreateDiscussion *ngIf="showDiscussion"></CreateDiscussion> 
      <CreatePoll *ngIf="showPoll"></CreatePoll> 
      <CreateEvent *ngIf="showEvent"></CreateEvent> 
     </div> 
    `, 
    styleUrls: ['./topicCreator.scss'] 
}) 
export class TopicCreatorComponent implements OnInit, AfterViewInit { 

    public showDiscussion = true; 
    public showPoll = false; 
    public showEvent = false; 

    show(tab){ 
     this.showDiscussion = false; 
     this.showPoll = false; 
     this.showEvent = false; 

     if(tab == 'showDiscussion') { 
      this.showDiscussion = true 
     } 
     if(tab == 'showPoll') { 
      this.showPoll = true 
     } 
     if(tab == 'showEvent') { 
      this.showEvent = true 
     } 
    } 
} 

Answer 1

вы можете использовать class.active ввода, как показано ниже

<ul class="nav nav-tabs"> 
     <li role="presentation" class="nav-item" [class.active]="showDiscussion" (click)="show('showDiscussion')"> 
      <a class="nav-link">Discussion</a> 
     </li> 
     <li role="presentation" class="nav-item" (click)="show('showEvent')" [class.active]="showEvent"> 
      <a class="nav-link">Event</a> 
     </li> 
     <li role="presentation" class="nav-item" (click)="show('showPoll')" [class.active]="showPoll"> 
      <a class="nav-link">Poll</a> 
     </li> 
</ul>