angular5.x 動態innerHTML插入標簽樣式無效問題

新建一個管道文件

import { Pipe, PipeTransform } from '@angular/core';

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

@Pipe({

name: "html"

})

export class HtmlPipe implements PipeTransform {

constructor(private sanitizer: DomSanitizer) {

}

public transform(style) {

return this.sanitizer.bypassSecurityTrustHtml(style);

}

}

 

在需要的module下引入

import { HtmlPipe } from '../pipe';

declarations: [

iComponent,

HtmlPipe

],

 

在html 中

<p *ngIf='checked' [innerHTML]="transformValue | html"></p>