如何在Angular中点击标签时切换title属性的状态？

安全阿岳

2026-8-25

解决方案

你需要在组件中记录当前title的状态，通过判断状态来切换值，而不是每次都直接设置为固定值。以下是符合Angular规范的实现方式：

方法一：直接在组件中管理title状态

这种方式不需要操作DOM，完全通过Angular的数据绑定实现，更符合框架最佳实践。

修改后的HTML代码

<a [title]="currentTitle" id="initial" role="button" (click)="magic()">
  <p>test</p>
</a>

修改后的TS代码

// 初始化title为初始值
currentTitle = '1';

magic(): void {
  // 切换title值：如果当前是'1'则改为'2'，否则改回'1'
  this.currentTitle = this.currentTitle === '1' ? '2' : '1';
}

方法二：保留DOM初始title值（适合初始值由外部或模板定义的场景）

如果希望初始title值保留在HTML模板中，可在组件初始化时读取并保存，再进行切换：

HTML代码（保留原初始title）

<a title="1" id="initial" role="button" (click)="magic()">
  <p>test</p>
</a>

修改后的TS代码

initialTitle: string;
currentTitle: string;

ngOnInit(): void {
  // 组件初始化时读取DOM的初始title值
  const elem = document.getElementById("initial");
  this.initialTitle = elem?.getAttribute('title') || '1';
  this.currentTitle = this.initialTitle;
}

magic(): void {
  // 基于初始值切换title
  this.currentTitle = this.currentTitle === this.initialTitle ? '2' : this.initialTitle;
}