Question

我有一个来自string类型变量的HTML代码段。请考虑以下语句存储为字符串类型变量

displayContent =
    `<div>
        <img alt="image1" src="image1.jpeg"/>
    </div>
    <div>
        <p>Some random text</p>
        <img alt="image2" src="image2.jpeg"/>
        <p>Some random text again</p>
        <img alt="image3" src="image3.jpeg"/>
        <p>Some random text</p>
    </div>`

现在，我必须在HTML页面中显示字符串变量'displayContent'，其中'displayContent'呈现为html文本。

我用过这个：<span [innerHTML]='displayContent'> 它在我的主HTML页面中精美地呈现了变量'displayContent'的HTML代码。

现在，来自某些来源的图片大于我的页面尺寸。我需要为每个<img />添加一个样式元素，例如<img style="max-width: 100%" />

为实现这一目标，我们只需在我们的javascript文件中使用replace()即可 displayContent = displayContent.replace(/<img/gi,'<img style="max-width: 100%" ')

因此，我们新的'displayContent'变为

`<div>
    <img style="max-width: 100%" alt="image1" src="image1.jpeg"/>
</div>
<div>
    <p>Some random text</p>
    <img style="max-width: 100%" alt="image2" src="image2.jpeg"/>
    <p>Some random text again</p>
    <img style="max-width: 100%" alt="image3" src="image3.jpeg"/>
    <p>Some random text</p>
</div>`

现在，当我使用渲染此更新变量时 <span [innerHTML]='displayContent'>它不会以任何方式缩放我的图像。图像仍然是原始大小。

此外，浏览器的开发人员工具中的“图像样式”属性没有更新。 Click here to see developer tools Styles

Answer 1

我找到了（可能）解决方案here。

它说我们必须清理HTML以应用样式。

创建一个新管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

不要忘记在声明

下将管道添加到模块中

@NgModule({
  declarations: [
    ...
    SafeHtmlPipe,
],

导入并使用它：

<span [innerHTML]="displayContent | safeHtml">

Answer 2

您必须使用[innerHTML]将DomSanitizer绑定到SafeHtml。

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  template: `
   <div [style.width.px]="300">
     <div [innerHtml]="safeHTML"></div>
   </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  html = '<img src="https://via.placeholder.com/1000x1000" style="max-width: 100%" />';

  get safeHTML(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.html);
  }

  constructor(private sanitizer: DomSanitizer) { }
}

Live demo

如何编辑和渲染存储为字符串的内部html？

2 个答案: