时间戳

首页 > 解决方案 > 如何从角度组件显示包含内联样式标签的字符串 HTML

html - 如何从角度组件显示包含内联样式标签的字符串 HTML

问题描述

我想从一个角度组件显示一个包含内联样式标记的已保存 HTML，我尝试过封装：ViewEncapsulation.None，但它不起作用。

零件：

@Component({
  selector: 'app-page-content',
  templateUrl: './page-content.component.html',
  styleUrls: ['./page-content.component.css'],
  encapsulation: ViewEncapsulation.None,
})

在 ts 组件中从 HTTP 获取数据：

description=<p class="ql-direction-rtl ql-align-right" style="text-align: center;"><strong><span style="color: #236fa1;">test</span></strong></p>

显示数据： <div [innerHtml]=description></div>

标签： htmlcssangulartypescriptinline

解决方案

由于安全问题，Angular 不允许您直接将样式传递给变量。所以你必须明确告诉它你的字符串是安全的。

你这样做如下：

import {DomSanitizer} from '@angular/platform-browser'

……

export class AppComponent {
  description;
  constructor(private sanitizer: DomSanitizer) {
    this.description = sanitizer.bypassSecurityTrustHtml(`<p class="ql-direction-rtl ql-align-right" style="text-align: center;"><strong><span style="color: #236fa1;">test</span></strong></p>`)
  }
}

推荐阅读