角度2の要素の属性の値を取得する方法は？

Question

私は2つのハイパーリンクを持つ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>

私は1つの角度ディレクティブを作成しました。 DOM要素とhrefリンクを読み込みます。しかし、それは最初のhrefだけを読んで、私はそれを解析できるように上記のスパンから2番目の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は基本的に内部に一つだけ<a>タグがありますセレクタ与えられたHTMLノードの最初のインスタンスを選択し、あなたが<span>上で直接指示を適用している場合、あなたの現在の実装の原因に問題があってはなりません<span>。

ディレクティブは以下のように複数のspanタグをホストしている場合：あなたが代わりにquerySelectorAllを使用する必要があります

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

、それはあなたのディレクティブ要素内にネストされているすべてのノードを選択することになります。

更新：

this.element.nativeElement.querySelectorAll('a')の出力は内蔵のforEachアレイ法を持っているのNodeListであるだけで、リストを反復処理し、各要素のhrefプロパティを取得します。

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