Angular中如何访问模板内元素属性并将其应用于其他元素

问题解答 #

你写的代码里的magic/moreMagic不属于Angular的内置特性，原生DOM元素上也没有对应属性，这段代码默认无法正常运行。

你这段代码的核心需求是根据外层<span>的data-value属性值，条件渲染不同的子内容，以下是可直接落地的实现方案：

方案1：直接调用原生DOM的dataset属性（无需修改组件逻辑，仅改模板） #

模板引用变量#customSpan默认获取的是原生HTMLSpanElement实例，所有data-前缀的自定义属性都会自动挂载到元素的dataset对象上，data-value对应的就是dataset.value，修改后的代码如下：

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

方案2：绑定组件属性（更符合Angular最佳实践，性能更好） #

如果这个判断值本身就是组件里可维护的变量，直接绑定组件属性即可，不需要操作DOM：

1. 组件类中定义变量：

public fruit = 'apple';

2. 模板中直接判断：

<span [data-value]="fruit">
   <span *ngIf="fruit === 'apple'"> OMG! Its an Apple:)</span>
   <span *ngIf="fruit != 'apple'"> Oh No! its not an Apple :( </span>
</span>

方案3：自定义指令扩展元素属性（仅当你需要自定义挂载属性时使用） #

如果你确实需要给元素额外挂载magic这类自定义对象，可以写一个简单的属性指令实现：

1. 定义指令：

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[magic]'
})
export class MagicDirective {
  @Input() magic: any;
}

2. 模板中使用：

<span data-value="apple" #customSpan [magic]="{moreMagic: 'apple'}">
   <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>

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