angular->html文本显示

1.新建pipe 文件

import {Pipe, PipeTransform} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'htmlReset'
})
export class HtmlResetPipe implements PipeTransform {

  constructor(private domSanitizer: DomSanitizer) {

  }

  transform(style) {
    return this.domSanitizer.bypassSecurityTrustHtml(style);
  }

}

2.新建module

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FileSizeFormatPipe} from '../../pipes/file-size-format.pipe';
import {HtmlResetPipe} from '../../pipes/html-reset.pipe';

@NgModule({
  declarations: [FileSizeFormatPipe, HtmlResetPipe],
  imports: [
    CommonModule
  ],
  exports: [FileSizeFormatPipe, HtmlResetPipe]
})
export class CommonPipeModule {
}

3.在需用此管道的module中引入该module

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {ShareInfoRoutingModule} from './share-info-routing.module';
import {ShareInfoComponent} from './share-info.component';
import {NgZorroAntdModule} from 'ng-zorro-antd';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {CommonPipeModule} from '../../common/modules/common-pipe/common-pipe.module';
import {TranslateModule} from '@ngx-translate/core';
import {MainModule} from '../main/main.module';


@NgModule({
  declarations: [ShareInfoComponent],
  imports: [
    CommonModule,
    ShareInfoRoutingModule,
    NgZorroAntdModule,
    FormsModule,
    ReactiveFormsModule,
    CommonPipeModule, // 管道module
    MainModule,
    TranslateModule.forChild(),
  ]
})
export class ShareInfoModule {
}

4.在界面上调用

 <div class="content" [innerHTML]="msgInfoData?.Content|htmlReset"></div>