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

【问题标题】：Angular: Can content of an HTML attribute accessed from within the same HTML tag?Angular：可以从同一个 HTML 标记中访问 HTML 属性的内容吗？
【发布时间】：2019-10-15 21:13:53
【问题描述】：

这个问题是 Angular 特有的。

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

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

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

这不起作用。能否请您告诉我如何在 Angular 中做到这一点？

【问题讨论】：

标签： html angular

【解决方案1】：

我有三种方法可以实现同一个目标。

使用 ts 变量

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

使用模板引用变量

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

使用 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

希望能帮到你。

【讨论】：

它的工作！谢谢李轩。所有三个答案都有效。

【解决方案2】：

你可以这样试试：

打字稿：

id = 'good'

模板：

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

【讨论】：

感谢 Adrita Sharma 的帮助。您的解决方案也有效。