访问模板内元素的属性并在 Angular 的其他元素中使用它

【问题标题】：Accessing attribute of an element inside a template and use it in other element in Angular访问模板内元素的属性并在 Angular 的其他元素中使用它
【发布时间】：2021-10-27 05:12:40
【问题描述】：

有没有办法做到以下几点

<span data-value="apple" #customSpan>
   <span *ngIf="customSpan.magic.moreMagic === 'apple'"> OMG! Its an Apple:)<span>
   <span *ngIf="customSpan.magic.moreMagic != 'apple'"> Oh No! its not an Apple :( <span>
<span>

那是什么魔法/moreMagics...？还是不可能这样做。也向其他方式开放。

【问题讨论】：

标签： javascript html angular typescript dom

【解决方案1】：

我找到了一种方法。

<span data-value="apple" #customSpan>
   <span *ngIf="customSpan.dataset.value === 'apple'"> OMG! Its an Apple:)<span>
   <span *ngIf="customSpan.dataset.value != 'apple'"> Oh No! its not an Apple :( <span>
<span>

这里value 不是dataset 对象上存在的默认属性，而是data-value 的一部分。因此，如果使用data-color 之类的内容，则将其提取为customSpan.dataset.color。

【讨论】：