angular [innerHtml]=“contentxq“ 不显示行内样式style pipe 返回值去掉html标签安全文本

问题描述

使用百度编辑器Ueditor，后台能返回正确的数据格式

使用[innerHTML]展示数据后div内没有行内样式

解决办法

在需要的地方新建管道

ng g pipe pipes/html

htmlpie管道代码

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: any) {
        return this.sanitizer.bypassSecurityTrustHtml(style);
    }

}

默认新建的管道会在core.module.ts中自动添加

import { HtmlPipe } from './pipes/html.pipe'
@NgModule({
  declarations: [
     HtmlPipe,
  ],

在html中的使用

<div [innerHTML]="contentxq | html"></div>

其他模块引用

比如在home模块中引用，在home.module.ts中添加如下内容

import { CoreModule } from '../../core/core.module';
@NgModule({
  imports: [
  CoreModule,
  ]

引用后就可以在html中正常使用

这是另一个功能

去掉接口返回数据中的html标签

要实现的效果：
将msgContent中的html标签去掉只展示文字

1、新建text.pipe.ts

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

@Pipe({name: 'text'})
export class textPipe implements PipeTransform {
    transform(text: any): any {
    	//js方法，去掉所有html标签
        return text.replace(/<[^>]+>/g,'')
    }
}

2、在module文件中引入管道

import { textPipe} from './service/text.pipe'
@NgModule({
  declarations: [textPipe],
  }

4、在html中使用管道

<div class="wd-message" innerHtml="{{ data?.msgBody.msgContent | text }}"></div>

5、实现效果