Wie bekomme ich Attribute von HTML DOM childNodes in Angular2

Question

Ich habe eine HTML-Zeichenfolge, die ich von einem API erhalten habe. Ich möchte nur die URL des Bildes oder das src-Attribut des Bildes aus der ganzen Zeichenfolge mit angular2 auswählen. Wie sollte ich darüber gehen .. Jede Hilfe wird sehr geschätzt.

<div class="field field-name-field-image field-type-image field-label-hidden"> 
<div class="field-items"> 
    <div class="field-item even" rel="og:image rdfs:seeAlso" resource="https://www.example.com/image/image001_42.jpg?itok=RuoKJFFA"> 
     <a href="/example.com"> 
      <img typeof="foaf:Image" src="https://www.example.com/image/image001_42.jpg?itok=RuoKJFFA" width="220" height="130" alt="title here" /> 
     </a> 
     </div> 
     </div> 
     </div> 

Answer 1

Wenn Sie wirklich sind Ihre HTML von einem API-Aufruf bekommen es wahrscheinlich kommen in als String, analysieren nur die Zeichenfolge für die src= und dann den Wert zwischen den doppelten Anführungszeichen.

let fullString = `<div class="field field-name-field-image field-type-image field-label-hidden"> 
<div class="field-items"> 
    <div class="field-item even" rel="og:image rdfs:seeAlso" resource="https://www.example.com/image/image001_42.jpg?itok=RuoKJFFA"> 
     <a href="/example.com"> 
      <img typeof="foaf:Image" src="https://www.example.com/image/image001_42.jpg?itok=RuoKJFFA" width="220" height="130" alt="title here" /> 
     </a> 
     </div> 
     </div> 
     </div>`; 
     // get the start of the src 
let srcStart = fullString.indexOf('src="'); 

// get the end of the src by starting at it's position + the number of chars 
let srcEnd = (fullString.indexOf('"', srcStart + 5)); 

let srcUrl = fullString.substring(srcStart, srcEnd); 

console.log('URL', srcUrl); 

Wenn Sie es wirklich brauchen Angular2, finden Sie das Element, das Sie tun müssen, und verwenden Sie dann ViewChild() sein, um es zu verweisen:

@ViewChild(myObject) myObject: ElementRef 
let ref = myObject.nativeElement;