如何在TypeScript/Angular中修改aria-label属性值

问题原因分析 #

• 直接给HTMLButtonElement赋值ariaLabel报错：Angular 7配套的TypeScript版本自带的DOM类型定义中，没有完整包含ARIA相关的DOM属性定义，类型检查不通过导致构建失败。
• setAttribute修改不生效：你模板中的按钮大概率通过Angular的属性绑定语法[attr.aria-label]绑定了变量/固定值，你手动修改原生DOM属性后，Angular触发变更检测时会把绑定的值重新覆盖到DOM上，导致手动修改的内容丢失。

推荐解决方案（符合Angular开发规范，无兼容问题） #

不要直接通过document.getElementById操作原生DOM，使用Angular原生的属性绑定能力实现需求：

1. 组件中定义对应存储aria-label内容的变量

// 组件类中定义
public buttonAriaLabel = '初始值';

2. 模板中给目标按钮绑定aria-label属性

<!-- 注意要用[attr.aria-label]的绑定语法，对应HTML属性 -->
<button [attr.aria-label]="buttonAriaLabel" id="aria_label_id_{{id}}">
  按钮内容
</button>

3. 需要修改的时候直接更新变量即可，Angular会自动同步到DOM

public changeAcessibility(isExpanded: boolean, id) {
  this.buttonAriaLabel = 'Changed Values';
}

兼容原生DOM操作的解决方案（特殊场景使用） #

如果必须手动操作DOM，使用Angular提供的ElementRef获取元素，避免直接调用documentAPI，同时处理类型报错：

1. 模板中给目标按钮加模板引用变量

<button #targetAriaBtn id="aria_label_id_{{id}}">按钮内容</button>

2. 组件中通过@ViewChild获取元素引用

import { ViewChild, ElementRef } from '@angular/core';

// 组件类中定义
@ViewChild('targetAriaBtn') targetBtn: ElementRef<HTMLButtonElement>;

public changeAcessibility(isExpanded: boolean, id) {
  // 写法1：用setAttribute，无类型报错
  this.targetBtn.nativeElement.setAttribute('aria-label', 'Changed Values');
  
  // 写法2：直接赋值ariaLabel，加any断言跳过类型检查
  (this.targetBtn.nativeElement as any).ariaLabel = 'Changed Values';
}

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