Question

我正在使用angular 4 innerHtml元素从服务器解析Html。

  <div *ngFor="let html of htmlToRender">
    <div [innerHtml]="html"></div>
     </div>

我正在使用API从服务器获取HTML，而我正在使用JSON.parse（）方法来解析响应类型。它给了我数组

   this.htmlToRender = JSON.parse(this.htmlToParse._body);

现在的问题是，当我渲染 this.htmltoRender 时，我可能会得到一些具有绝对路径的图像或文件URls。例如：

<img alt="" src="/Source/ImageBrowser/Image?path=logoCar.qd.png"

从服务器，我将得到这样的路径...我需要添加Url来访问该源示例：对于响应，我需要附加示例“http://google.com” 即，。

<img alt="" src="http://google.com/Analytics/ImageBrowser/Image?path=logo.qd.png">

因为从服务器解析它们无法追加所以任何想法我们如何在角度4中实现这一点？

Answer 1

使用正则表达式从服务器获取结果后，可以尝试替换所有URL。查找所有出现的/Source/ImageBrowser/，并将其替换为您想要的网址。

var regExp = new RegExp(/\/Source\/ImageBrowser\/*/g);
this.htmlToRender = this.htmlToRender.replace(regExp,'http://google.com/Analytics/ImageBrowser/');

Answer 2

出于性能原因替换组件itselef而不是html中的出现，

由于您在this.htmlToRender中有数组，

this.htmlToRender.forEach(html => {
   html = html.replace("/Source", "http://google.com/Analytics");
})

如果您想使用 regExp

进行替换

this.htmlToRender.forEach(html => {
   html = html.replace(/\/Source/i, "http://google.com/Analytics");
})

如果/Source/ImageBrowser不一样，那么就可以了，

this.htmlToRender.forEach(html => {
    let imageUrl = a.split('/');
    imageUrl = imageUrl[imageUrl.length - 1]
    imageUrl = "http://google.com/Analytics/ImageBrowser/" +imageUrl
    html = imageUrl
})

Answer 3

我认为这是由于角度安全机制造成的。尝试使用here所述的DomSanitizer。

示例：

updateVideoUrl(id: string) {
   // Appending an ID to a YouTube URL is safe.
   // Always make sure to construct SafeValue objects as
   // close as possible to the input data so
   // that it's easier to check if the value is safe.
   this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;
   this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
}

Angular 4将URL添加到innerhtml

3 个答案: