angular - Angular 2：更改了 innerHTML 属性和图像 src 路径

Question

动态地，我从我的服务器以 json 格式获取 HTML 内容。

{ "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>​​&lt;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>" }

组件.ts

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

sat.html.pipe.ts

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

我没有其他选择可以更改此 html 内容。但是，对于我的应用程序，我必须实现两件事，

1. 更改图像路径
2. 添加点击事件

最终输出应该是：

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

和

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

我们如何使用任何管道正则表达式或其他逻辑来实现它？给我一些关于它的功能建议。

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