Angular 2: changement de l'attribut innerHTML et du chemin de l'image src

Question

Dynamiquement, j'obtiens du contenu HTML de mon serveur au format json.

{ "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); } 

Il n'y a pas d'autre option pour moi de changer ce contenu html. Mais, pour mon application, je dois réaliser deux choses,

1. Changer chemin d'image
2. ajouter cliquez événement

sortie finale devrait être:

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

et

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

Comment pouvons-nous l'obtenir en utilisant un regrex de tuyau ou une autre logique? donnez-moi des suggestions fonctionnelles à ce sujet.

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>'); 
    } 
}