如何解析字符串化的 HTML 并将其绑定到 DOM 及其属性（角度）答案

【问题标题】：How to parse a stringified HTML and bind it to the DOM with its attributes (angular)如何解析字符串化的 HTML 并将其绑定到 DOM 及其属性（角度）
【发布时间】：2022-02-12 01:53:56
【问题描述】：

我有这种字符串

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet vestibulum eros, ac aliquam magna. Interdum et malesuada 在 faucibus 中成名 ac ante ipsum primis。在 ante urna, dictum sed porta ut, consectetur eu felis. Pellentesque eleifend egestas augue, iaculis ultricies nulla volutpat at. Vivamus sagittis est eu rutrum blandit"

其中包括样式属性我想将它绑定到我的 html 但无论我尝试什么，我总是会失去一些像第一个那样的风格

知道如何在不丢失任何样式的情况下将其放入我的 html 中吗？谢谢

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

我确实假设你已经在你的 HTML 元素上使用了 [innerHtml] 指令，如下所示：

// Your *.html template
<p [innerHTML]="myUnsafeHtmlString"></p>

// Your *.component.ts controller file
myUnsafeHtmlString: string = `<div style="text-align: center;">
<b style="color: rgb(122, 122, 122); font-family: 'Open Sans', Arial, sans-serif; text-align: justify;">Lorem ipsum...</b></div>`;

在这种情况下，出于安全原因，Angular 会阻止一些 HTML 属性。您在浏览器开发者工具 -> 控制台选项卡中有相关信息。

更多关于 Angular 中的 DomSanitizer - https://angular.io/api/platform-browser/DomSanitizer

要在模板中实现“不安全”的 html，您需要通过 DomSanitizer 显式调用它。在我的示例中，我使用 @Pipe 来实现这一点，但是您也可以从组件控制器中使用它。

// Your *.html template
<p [innerHTML]="myUnsafeHtmlString | safeHtml"></p>

// Your *.pipe.ts
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

// Your *.component.ts controller file
myUnsafeHtmlString: string = `<div style="text-align: center;">
<b style="color: rgb(122, 122, 122); font-family: 'Open Sans', Arial, sans-serif; text-align: justify;">Lorem ipsum...</b></div>`;

完整的 stackblitz 示例：

https://stackblitz.com/edit/angular-ivy-yxcwjb?file=src%2Fapp%2Fapp.component.html

【讨论】：