angular中绑定的innerHtml内部样式不起作用的问题

问题：使用innerHtml绑定的内容在页面上不显示相应的样式

如：

listItem = "测试<span style='color:red'>红色</span>字体";

<div [innerHtml]="listItem"></div>

在浏览器中查看时，div中的内容是"测试<span>红色</span>字体"，定义的样式没有了

解决：使用pipe

safe-html.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

safe-html.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SafeHtmlPipe } from "@shared/pipe/safe-html/safe-html.pipe";
@NgModule({
    imports: [
        CommonModule,
    ],
    declarations: [SafeHtmlPipe],
    exports: [SafeHtmlPipe]
})
export class SafeHtmlModule{ }

引入SafeHtmlModule，将<div [innerHtml]="listItem"></div>改为<div [innerHtml]="listItem | safeHtml"></div>即可。

转载于:https://www.cnblogs.com/boreguo/p/10243039.html