Angular中点击选中标签时设置aria-selected为true的实现方案

看起来你遇到的问题是点击标签时，aria-selected属性没有正确切换为true。这通常是因为组件里没正确维护选中状态，或者属性绑定逻辑出了问题。下面我针对你的四个文件给出具体修改方案：

1. tabs.component.ts #

首先要在tabs组件内部维护一个选中标签的状态变量，用来跟踪当前哪个标签被选中，同时添加点击事件处理方法来更新这个状态：

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

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent {
  // 接收父组件传入的tabs数据，比如每个tab的标题、唯一标识等
  @Input() tabs: { id: string; label: string }[] = [];
  
  // 维护当前选中的tab索引，默认选中第一个标签
  selectedTabIndex = 0;

  // 处理tab点击事件，更新选中索引
  handleTabClick(index: number): void {
    this.selectedTabIndex = index;
  }
}

2. tabs.component.html #

接下来在模板里给每个tab元素绑定aria-selected属性，通过判断当前索引是否等于选中索引来动态切换属性值；同时绑定点击事件触发上面的处理方法（额外加了键盘事件，符合无障碍访问规范）：

<div class="tabs-container">
  <div 
    *ngFor="let tab of tabs; let i = index"
    class="tab-item"
    role="tab"
    [aria-selected]="selectedTabIndex === i"
    [aria-controls]="tab.id"
    tabindex="0"
    (click)="handleTabClick(i)"
    (keydown.enter)="handleTabClick(i)"
    (keydown.space)="handleTabClick(i)"
  >
    {{ tab.label }}
  </div>
</div>

<!-- 可选：tab内容区域，根据选中状态显示对应内容 -->
<div class="tab-content">
  <div 
    *ngFor="let tab of tabs; let i = index"
    id="{{ tab.id }}"
    role="tabpanel"
    [hidden]="selectedTabIndex !== i"
  >
    <!-- 这里可以放置tab的具体内容，或者通过@Input从父组件接收 -->
  </div>
</div>

3. app.component.ts #

在父组件里定义tabs的数据源，传递给子组件使用：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 定义tabs的具体数据
  tabs = [
    { id: 'tab1', label: '标签一' },
    { id: 'tab2', label: '标签二' },
    { id: 'tab3', label: '标签三' }
  ];
}

4. app.component.html #

在父组件模板中引用tabs组件，并把定义好的tabs数据传进去：

<app-tabs [tabs]="tabs"></app-tabs>

关键注意点 #

• 一定要用属性绑定（方括号[]）来绑定aria-selected，这样才能根据变量值动态更新属性，静态字符串绑定是不会变化的
• 如果你的tabs组件是通过父组件、服务等外部方式维护选中状态，要确保状态能同步到子组件的模板中
• 检查是否有其他逻辑（比如第三方指令、自定义样式）意外覆盖了aria-selected的值

这样修改后，点击任意标签时，对应的aria-selected就会变为true，其他标签则保持false，完全符合无障碍访问的要求。

内容的提问来源于stack exchange，提问作者FakeEmpire