Angular2 Pipes Filter Links in HTML-String

Question

Da ich meine HTML-Zeichenfolge von einer externen Quelle, ich möchte alle Links, die Bilder enthält, entfernen Sie das href-Attribut und ersetzen Sie es durch (Klick) Ereignis ... Ich bin versucht, dies mit einem Winkelrohr zu tun, wird das Rohr zu entfernen nur das Attribut href aber das Click-Ereignis funktioniert nicht

ich versuche a.onclick = this.showLightbox;, und ich versuchte a.addEventListener("click", this.showLightbox, false);

aber beide funktionieren nicht

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'lightboxPipe'}) 
export class LightboxPipe implements PipeTransform { 

    transform(value: string): string { 

    let div = document.createElement('div'); 
    div.innerHTML = value; 

    [].forEach.call(div.getElementsByTagName("img"), (img) => { 
     var a = img.parentElement; 
     a.removeAttribute('href'); 
     a.onclick = this.showLightbox; 
    }); 

    return div.innerHTML; 
    } 

    showLightbox(){ 
    console.log('a link has been clicked'); 
    } 
} 

Answer 1

Sie können so etwas wie dies versuchen:

@Pipe({name: 'lightboxPipe'}) 
export class LightboxPipe implements PipeTransform { 

    transform(value: string, el): string { 
    let div = document.createElement('div'); 
    div.innerHTML = value; 

    [].forEach.call(div.getElementsByTagName("img"), (img) => { 
     var a = img.parentElement; 
     a.removeAttribute('href'); 
     a.onclick =() => this.showLightbox(img.src); 
    }); 

    el.appendChild(div); 
    } 

    showLightbox(src){ 
    console.log('a link has been clicked'); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<div #el>{{ html | lightboxPipe: el }}</div>`, 
    pipes: [LightboxPipe] 
}) 
export class App { 
    html = '<a href="#"><img src="http://placehold.it/350x150"></a>'; 
} 

Plunker Example