Wie erhalten Sie den Wert des Attributs des Elements in Winkel 2?

Question

Ich habe eine HTML-Spanne, die zwei Hyperlinks hat.

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

Ich habe eine Winkel Richtlinie erstellt. Welches liest das DOM-Element und den href-Link. Aber es liest nur die erste href nur, wie lese ich die zweite href aus der obigen span, so dass ich es analysieren kann.

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

Wo auf Ihrer Vorlage rufen Sie die Richtlinie? Ist es direkt auf dem <span> Element oder ist es auf einer höheren Ebene?

Die querySelector API wählt nur die erste Instanz eines HTML-Knoten einen Wähler gegeben, so dass, wenn Sie die Richtlinie direkt am <span> sich bewerben, sollte es kein Problem mit Ihrer aktuellen Implementierung Ursache im Grunde ist es nur eine <a> Tag innerhalb die <span>.

Wenn die Richtlinie wie mehrere Span-Tags präsentiert:

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

Sie querySelectorAll stattdessen verwenden sollten, und das würde alle Knoten auswählen, die in Ihrem Richtlinie Element verschachtelt sind.

Update:

Die Ausgabe von this.element.nativeElement.querySelectorAll('a') ist ein NodeList, die die forEach Array-Verfahren eingebaut hat gerade die Liste iterieren und erhalten die href Eigenschaft jedes Element..

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