为何HTML元素的tabindex被自动改为-1？Angular4技术求助

这种tabindex被莫名改成-1的情况确实挺让人困惑的，我之前在Angular项目里也遇到过类似的问题，结合你的代码，给你几个排查和解决的方向：

1. 先修复模板里的重复ID问题（重要！） #

你在*ngFor循环里给<h4>设置了固定的id="name"，这会导致页面出现多个相同ID的元素，违反HTML规范，不仅可能引发tabindex异常，还会影响无障碍访问和DOM选择器的正常工作。先把ID改成唯一的：

<h4 id="name-{{i}}" tabindex="0" aria-label="{{employee.name}}">{{employee.name}}</h4>

2. 使用Angular属性绑定替代静态属性 #

静态的tabindex="0"可能在Angular的变更检测过程中被意外覆盖，换成属性绑定的方式可以确保值被正确设置：

<div *ngFor="let employee of employees; let i = index"> 
  <h4 id="name-{{i}}" [tabindex]="0" aria-label="{{employee.name}}">{{employee.name}}</h4> 
  <p [tabindex]="0" aria-label="{{employee.id}}">{{employee.id}}</p> 
  <p><a role="link" target="_blank" href="url" aria-label="Show Details" [tabindex]="0">Show Detail...</a></p>
</div>

3. 排查是否有其他代码修改了tabindex #

检查你的组件逻辑、自定义指令或者引入的第三方UI库，有没有针对这些元素的代码动态设置了tabindex="-1"。比如某些无障碍指令、状态控制逻辑，可能会在元素渲染后修改这个属性。

4. 手动在生命周期钩子中设置tabindex #

如果上面的方法都没用，可以在组件的ngAfterViewChecked钩子中手动强制设置tabindex，确保DOM更新后值不会被篡改：

首先修改模板，给元素添加模板引用变量：

<div *ngFor="let employee of employees; let i = index"> 
  <h4 #nameEl id="name-{{i}}" aria-label="{{employee.name}}">{{employee.name}}</h4> 
  <p #idEl aria-label="{{employee.id}}">{{employee.id}}</p> 
  <p><a #detailLink role="link" target="_blank" href="url" aria-label="Show Details">Show Detail...</a></p>
</div>

然后在组件类中实现AfterViewChecked：

import { Component, AfterViewChecked, QueryList, ViewChildren, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourEmployeeComponent implements AfterViewChecked {
  @ViewChildren('nameEl') nameElements: QueryList<ElementRef>;
  @ViewChildren('idEl') idElements: QueryList<ElementRef>;
  @ViewChildren('detailLink') detailLinks: QueryList<ElementRef>;

  ngAfterViewChecked(): void {
    // 给h4设置tabindex
    this.nameElements.forEach(el => {
      el.nativeElement.setAttribute('tabindex', '0');
    });
    // 给p元素设置tabindex
    this.idElements.forEach(el => {
      el.nativeElement.setAttribute('tabindex', '0');
    });
    // 给链接设置tabindex
    this.detailLinks.forEach(el => {
      el.nativeElement.setAttribute('tabindex', '0');
    });
  }
}

这个方法会在每次视图检查更新后强制同步tabindex的值，能有效避免被其他逻辑覆盖。

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