Angular 设置string文本以html文本解析显示

start

最近在使用富文本编辑，获取到了富文本编辑器，编辑好的string文本，想转换成html文本显示，发现Angular和Vue还是有点区别的，下面记录一下，转换方法

正式开始

编写文件Htmlpipe.ts

/*
 * @Author: lazy_tomato
 * @Date: 2020-07-21 17:03:20
 * @LastEditors: lazy_tomato
 * @LastEditTime: 2020-07-21 17:03:20
 * @Description: 把string解析html标签
 */
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
 name: 'html'
})
export class HtmlPipe implements PipeTransform {

    constructor (private sanitizer: DomSanitizer) {
    }

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

将我们刚刚编写的文件 Htmlpipe.ts 引入到要转义的modul.ts中

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ShareModule } from 'src/app/share.module';
import { ShowNoticeComponent } from './show-notice.component';
import { ShowNoticeService } from './show-notice.service';
//***修改***
import { HtmlPipe } from './Htmlpipe';



@NgModule({
    //***修改***
  declarations: [ShowNoticeComponent,HtmlPipe],
  imports: [
    CommonModule,
    ShareModule
  ], providers: [ShowNoticeService],
  exports: [ShowNoticeComponent]
})
export class ShowNoticeModule { }

在html文件中使用

 <div [innerHTML]='notice | html'></div>

notice 就是我们要转义的Sring文本

end

上面做完，到这里基本就可以使用啦。