背景：在系统中使用quill富文本编辑器，使用的版本是ngx-quill@4.0.0，具体使用方法参见我的另一篇博客 Angular：ngx-quill富文本编辑器的使用（地址：
https://blog.csdn.net/qq_36451496/article/details/88971422
）
其中用富文本编辑好的表单内容这样在页面上展示：
<div nz-col [nzSpan]="18">
<nz-form-item nzFlex>
<nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="10" nzFor="content">消息内容</nz-form-label>
<nz-form-control nz-col [nzSpan]="14">
<ng-container>
<div [innerHTML]="this.validateForm.controls.content.value"></div>
</ng-container>
</nz-form-control>
</nz-form-item>
</div>像这样使用innerHTML直接绑定表单中的content的值，会发现页面上明明拿到了完整的html代码，却显示不出富文本中的字体颜色和字体背景色这两个属性。
另外打开控制台，发现有警告：
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
查了一下好像意思是说HTML上的一些内容被清理了，这样也就导致了innerHTML中绑定的内容显示不完整。解决方法就是：使用
bypassSecurityTrustHtml
这个来进行转换。
话不多说，直接上代码：
我们在html绑定的使用ts文件的定义的一个专门用来显示的字段viewContent，
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {
viewContent: any; // 定义这个字段用来转换显示
constructor(
.....
private sanitizer: DomSanitizer
) {
}
initFormData(data) {
.....
this.validateForm.controls['content'].setValue(data.content);
this.viewContent = this.sanitizer.bypassSecurityTrustHtml(data.content); // 在这里将表单content这个字段的内容进行转化即可
.....
}
}这样再运行就不会有警告啦，innerHTML内容也显示正常啦！
7月19日修改补充：
发现quill富文本中一些样式使用innerHTML直接显示的时候失效了，查了下原因，是因为
quill.js
这个富文本编辑器自身的问题了，由于这个编辑器的文本样式大多是使用
自定义css渲染
的（注意下面代码的class=”ql-xxx-xxx”），所以相当于编辑器的内容样式仅在此网页有效。
想要解决有的样式无法正常显示的问题，只需要把上面用于显示的代码替换成下面这样就好了：
<div nz-col [nzSpan]="18">
<nz-form-item nzFlex>
<nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="10" nzFor="content">消息内容
</nz-form-label>
<nz-form-control nz-col [nzSpan]="14">
<ng-container>
<div style="line-height:5px;">
<div class="ql-editor" [innerHTML]="viewContent">
</div>
</div>
</ng-container>
</nz-form-control>
</nz-form-item>
</div>效果：
