Angular 2: InnerHTML-Attribut und Image-Pfad geändert

Question

Dynamisch erhalte ich HTML-Inhalte von meinem Server im JSON-Format.

{ "title":"Home", "name":"ss_home", "content":"<div class=\"ExternalClass3dfsfsf204E51\"><table id=\"layoutsTable\" style=\"width&#58;100%;\"><tbody><tr style=\"vertical-align&#58;top;\"><td style=\"width&#58;100%;\"><div class=\"ms-rte-layoutszone-outer\" style=\"width&#58;100%;\"><div class=\"ms-rte-layoutszone-inner\"><div class=\"ms-rtestate-read ms-rte-embedcode ms-rtestate-notify ms-rte-embedil s4-wpActive\" unselectable=\"on\"><table border=\"1\" width=\"850\" unselectable=\"on\"><tbody unselectable=\"on\"><tr unselectable=\"on\"><td unselectable=\"on\"> \r\n    <strong unselectable=\"on\">Quality Policy&#58;</strong><br unselectable=\"on\"><strong unselectable=\"on\" style=\"line-height&#58;20px;\"><em unselectable=\"on\">“Some content”.</em> </strong></td></tr><tr unselectable=\"on\"><td unselectable=\"on\">\r\n    <strong unselectable=\"on\">Deriving Project Quality Objectives-Approach</strong><span unselectable=\"on\" style=\"line-height&#58;19px;\"> </span>\r\n    <img width=\"850\" height=\"414\" src=\"/org/Data/Home-page.png\" title=\"Home page\" class=\"alignnone size-large wp-image-34364857\" unselectable=\"on\" data-themekey=\"#\" alt=\"\" /> &#160; </td></tr></tbody></table> \r\n <span unselectable=\"on\" style=\"line-height&#58;30px;\">\r\n  <br unselectable=\"on\">\r\n  <strong unselectable=\"on\">Organization Chart</strong></span><img width=\"650\" height=\"350\" src=\"/org/Data/Org_chart.jpg\" title=\"Org chart\" class=\"alignnone size-large wp-image-34138132\" unselectable=\"on\" data-themekey=\"#\" alt=\"\" /></div><p>​​<a class=\"link_nav\" data-action=\"project_initiation\" href=\"#\" title=\"Project Initiation\" unselectable=\"on\">Project Initiation</a> \r\n <br> </p></div></div></td></tr></tbody></table><span id=\"layoutsData\" style=\"display&#58;none;\">false,false,1</span></div>" } 

component.ts

<div class="content" [innerHTML]="pq.content_QMS | safeHtml"></div> 

sate.html.pipe.ts

transform(value) { 
return this.sanitized.bypassSecurityTrustHtml(value); } 

Es gibt keine andere Option für mich diesen HTML Inhalt zu ändern. Aber für meine app habe ich zwei Dinge zu erreichen,

1. ändern Bildpfad
2. hinzufügen klicken Ereignis

sollte fertige Ausgabe sein:

<img src="/org/Data/Org_chart.jpg" /> to <img src="http://example.com/org/Data/Org_chart.jpg" 

und

<a class="link_nav" data-action="project_initiation" href="#" title="Project Initiation"> to  <a class="link_nav" (click)="project_initiation" href="#" title="Project Initiation"> 

Wie können wir es mit jedem Rohr Regrex oder einer anderen Logik erreichen? gib mir einen funktionellen Vorschlag dazu.

Answer 1

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <div class="content" [innerHTML]="value"></div> 
    </div> 
    `, 
    }) 
    export class App implements OnInit { 
    value; 

    constructor(private sanitized: DomSanitizer) { 
    } 

    @HostListener('click', ['$event.target']) 
    clicked(eventTarget: HTMLElement) { 
     console.log('clicked', eventTarget); 
    } 

    ngOnInit() { 
    this.value = 
    this.sanitized.bypassSecurityTrustHtml('<a href="#" 
     href="javascript:void(0)">hi link<a>'); 
    } 
}