如何获取角度2中元素的属性值？

Posted 2023-02-22

【中文标题】如何获取角度2中元素的属性值？

【英文标题】：How to get the value of the attribute of element in angular 2?

【发布时间】：2017-11-10 08:43:35

【问题描述】：

我有一个 html 跨度，它有两个超链接。

<span><a href="http://appcarvers.cloudaccess.host/index.php?Itemid=207" >Shirley Setia</a><i class="fa fa-caret-right"></i>
<a href="http://appcarvers.cloudaccess.host/index.php?Itemid=210" >Harry</a>
</span>

我创建了一个角度指令。它读取 DOM 元素和 href 链接。但它只读取第一个 href 我如何从上面的 span 中读取第二个 href 以便我可以解析它。

import  Directive, ElementRef, Renderer, HostListener  from '@angular/core';
import  NavController  from 'ionic-angular';
import  Input, Output, EventEmitter  from '@angular/core';

@Directive(
  selector: '[stream-link]' // Attribute selector
)

export class StreamLink 
  constructor(public element: ElementRef, public renderer: Renderer) 

    renderer.listen(element.nativeElement, 'click', (event) => 

      let anchorUrl = this.element.nativeElement.querySelector('a');
      // This anchorUrl shows only first href url
    
  

【问题讨论】：

尝试使用@ContentChildren

【参考方案1】：

您在模板的哪个位置调用指令？是直接在<span> 元素上还是在更高级别？

querySelector API 仅选择给定选择器的 html 节点的第一个实例，因此如果您直接在 <span> 上应用指令，您当前的实现应该没有问题，因为基本上只有一个<a>tag 在<span>内。

如果指令托管多个跨度标签，例如：

<div stream-link>
  <span><a href="...">Link 1</a></span>
  <span><a href="...">Link 2</a></span>
  <span><a href="...">Link 3</a></span>
</div>

您应该改用querySelectorAll，这将选择嵌套在您的指令元素内的所有节点。

更新：

this.element.nativeElement.querySelectorAll('a') 的输出是一个 NodeList，它内置了 forEach 数组方法。只需遍历列表并获取每个元素的 href 属性。

let urls = [];
let nodes = this.element.nativeElement.querySelectorAll('a');
nodes.forEach(node => urls.push(node.href));

【讨论】：

我试过这个this.element.nativeElement.querySelectorAll('a')，但它只告诉了锚点和激活的锚点的数量，但没有显示锚点的实际 URL。