angular把html转换成字符串,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文件中使用

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

end

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