使用Angular 2的鼠标单击或键盘选项卡触发功能

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

@Component({
  selector: 'app-tab-navigation',
  template: `
    <div>
      <button (click)="selectTab(1)" [class.active]="activeTab === 1" tabindex="0">Tab 1</button>
      <button (click)="selectTab(2)" [class.active]="activeTab === 2" tabindex="-1">Tab 2</button>
      <button (click)="selectTab(3)" [class.active]="activeTab === 3" tabindex="-1">Tab 3</button>
      <div *ngIf="activeTab === 1">Content for Tab 1</div>
      <div *ngIf="activeTab === 2">Content for Tab 2</div>
      <div *ngIf="activeTab === 3">Content for Tab 3</div>
    </div>
  `,
  styles: [`
    .active {
      background-color: lightblue;
    }
  `]
})
export class TabNavigationComponent {
  activeTab = 1;

  selectTab(tabIndex: number) {
    this.activeTab = tabIndex;
  }
}

<button (click)="selectTab(1)" [class.active]="activeTab === 1" tabindex="0">Tab 1</button>
<button (click)="selectTab(2)" [class.active]="activeTab === 2" tabindex="-1">Tab 2</button>
<button (click)="selectTab(3)" [class.active]="activeTab === 3" tabindex="-1">Tab 3</button>

selectTab(tabIndex: number) {
  this.activeTab = tabIndex;
  // 更新按钮的tabindex
  const buttons = document.querySelectorAll('button');
  buttons.forEach((button, index) => {
    button.setAttribute('tabindex', index === tabIndex - 1 ? '0' : '-1');
  });
}