问题:使用innerHtml属性赋值一段html片段时,片段中的样式css会被忽略。
解决:可使用DomSanitizer将其转化一下。这里定义了一个pipe,具体如下:
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
// https://angular.io/guide/security
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) { }
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
则可以实现对展示内容的自定义样式。
htmlStr = `
<h1>innerHtml内容</h1>
<h2 style="color: #1b75bb;">样式自定义</h2>
`
<div [innerHtml]="htmlStr | safeHtml"></div>
结果: