如何显示包含来自 angular 组件的内联样式标签的字符串 HTML

Question

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

组件：

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

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

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>

Answer 1

由于安全问题，

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>`)
  }
}

如何显示包含来自 angular 组件的内联样式标签的字符串 HTML

How to display string HTML containing inline style tag from angular component

html

css

inline

typescript

angular