ionic可以上鸿蒙吗,前端：Angular框架与Ionic框架集成Html翻译pipe（管道）

在前端开发的时候经常会遇到页面显示的内容有HTML标记。默认是没有经过翻译的。集成翻译管道就可以正常显示内容。由于Angular与ionic集成的方法有点不，所以分开写。

一、Angular框架集成pipe

1、新建一个管道

新建命令：ng g pipe pipe/tohtml

tohtml.pipe.ts文件代码：

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

import { DomSanitizer } from '@angular/platform-browser';

@Pipe({

name: 'tohtml' //使用名称

})

export class TohtmlPipe implements PipeTransform {

//构造方法中加入DomSanitizer

constructor(private _sanitizer: DomSanitizer){}

transform(html: any, args?: any): any {

//获取到HTML内容，对html进行转换

return this._sanitizer.bypassSecurityTrustHtml(html);

}

}

2、在使用的地方进行引用

二、Ionic框架集成pipe

1、新建一个管道

新建命令：ionic g pipe pipes/html

html.pipe.ts文件代码

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

import {DomSanitizer} from '@angular/platform-browser';

@Pipe({

name: 'html'

})

export class HtmlPipe implements PipeTransform {

//将DomSanitizer添加到构造方法中

constructor(private _sanitizer: DomSanitizer){}

transform(value: any, ...args: any[]): any {

//这里返回的一个html内容，将value进行转换

return this._sanitizer.bypassSecurityTrustHtml(value);

}

}

2、集成module，进行模块化

新建命令：ionic g module pipes/pipes

pipes.module.ts文件代码：

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

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

import {HtmlPipe} from "../html.pipe";

@NgModule({

declarations: [HtmlPipe],

imports: [

CommonModule

],

exports:[HtmlPipe]

})

export class PipesModule { }

3、去掉app.module.ts文件的declarations版块的HtmlPipe声明

4、在使用的模块的module里面加上PipesModule

例如在newsdetail.module.ts里面的imports版块加入PipesModule

5、HTML部分

5、对比效果