html - Angular：可以从同一个 HTML 标记内访问 HTML 属性的内容吗？

Question

这个问题是 Angular 特定的。

我正在编写一个 Angular 程序，在我的模板 (html) 中，我需要从同一个 tag中读取id属性的内容。

下面是一个非常简化的示例，它检查id 是否有一个名为“good”的值，然后为class分配一个名为“active”的值。

 <li id="good" [className]=" [id] == 'good' ? 'active' : '' "><li>

这是行不通的。您能告诉我如何在 Angular 中做到这一点吗？

标签： htmlangular

Answer 1

我有三种方法可以实现相同的目标。

1. 使用 ts 变量

<li [id]="id" 
    [className]="id == 'good' ? 'active' : '' ">
    Use ts variable
</li>

2. 使用模板引用变量

<li id="good" 
    #li
    [className]=" li.id == 'good' ? 'active' : '' ">
    Use template reference variable
</li>

3. 使用 CSS 选择器

<li id="good" class="good-css" >
    Use css selector
</li>

.good-css[id=good] {
  color: blue
}

https://stackblitz.com/edit/angular-anowbm?file=src/app/app.component.html

希望能帮到你。