Angular：如何在HTML标签属性绑定中访问自身的text属性？

先帮你理清两个核心问题，再给出可行的解决办法：

1. 三元表达式语法写错了：Angular绑定里的三元运算符格式是 条件 ? 符合条件的类 : 不符合的类，你写成了 条件 : 类1 : 类2，这会直接导致语法报错，得先把这个改过来。
2. 默认的text指向不对：模板里直接写text，Angular会默认去组件类里找同名属性，而不是读取当前label标签上的自定义text属性，这就是你没法访问自身属性的原因。

下面给你两种实用的实现方案：

方案1：用模板引用变量读取DOM属性（原生标签场景） #

如果只是在原生label上用自定义text属性，你可以给每个标签加个模板引用变量，通过它来获取当前元素的text属性值，再完成类绑定：

<!-- 给每个label加唯一的模板引用变量，比如#label1、#label2 -->
<label #label1 [class]="label1.getAttribute('text') === 'test1' ? 'class1' : 'class2'" text="test1"></label>
<label #label2 [class]="label2.getAttribute('text') === 'test1' ? 'class1' : 'class2'" text="test2"></label>

要是你需要绑定多个类，用[ngClass]会更直观：

<label #label [ngClass]="{
  'class1': label.getAttribute('text') === 'test1',
  'class2': label.getAttribute('text') !== 'test1'
}" text="test1"></label>
<label #label [ngClass]="{
  'class1': label.getAttribute('text') === 'test1',
  'class2': label.getAttribute('text') !== 'test1'
}" text="test2"></label>

方案2：封装成自定义组件（Angular推荐写法） #

如果这类标签会重复使用，更推荐封装成自定义组件，把text作为输入属性，完全遵循Angular的数据绑定逻辑，不用直接操作DOM：

第一步：创建自定义组件 #

// custom-label.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-custom-label',
  template: `<label [class]="text === 'test1' ? 'class1' : 'class2'">{{ text }}</label>`,
  standalone: true // 如果你用的是Angular 14+的独立组件，就加这行
})
export class CustomLabelComponent {
  @Input() text!: string; // 定义输入属性，接收外部传入的text值
}

第二步：在模板里使用组件 #

<app-custom-label text="test1"></app-custom-label>
<app-custom-label text="test2"></app-custom-label>

这样写出来的代码更干净，也更容易维护和扩展。

最后测试一下：第一个标签会自动应用class1，第二个应用class2，完全符合你的需求。

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