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

Question

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

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

Answer 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));