Angular4 innerHtml呈現富文本內容樣式

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

在app.module.ts配置

import { NgModule } from '@angular/core'
import { SafeHtmlPipe } from '../safe-html.pipe';

import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent, SafeHtmlPipe],
  imports: []
})
export class AppModule {}

在app.component.html

<div [innerHtml]="content | safeHtml"></div>