如何使用Angular以编程方式激活Bootstrap选项卡和打开选项卡内容

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" [class.active]="activeTab === 'tab1'" (click)="activateTab('tab1')">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [class.active]="activeTab === 'tab2'" (click)="activateTab('tab2')">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [class.active]="activeTab === 'tab3'" (click)="activateTab('tab3')">Tab 3</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane" [class.show.active]="activeTab === 'tab1'">Tab 1 content</div>
  <div class="tab-pane" [class.show.active]="activeTab === 'tab2'">Tab 2 content</div>
  <div class="tab-pane" [class.show.active]="activeTab === 'tab3'">Tab 3 content</div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent {
  activeTab: string = 'tab1';

  activateTab(tab: string) {
    this.activeTab = tab;
  }
}

<app-tabs></app-tabs>