侧边栏壁纸
博主头像
微笑涛声

一个在编程学习中逐渐变强的孩子! 热爱编程,喜欢软件开发!

  • 累计撰写 129 篇文章
  • 累计创建 58 个标签
  • 累计收到 6 条评论
隐藏侧边栏

前端:Angular框架与Ionic框架集成Html翻译pipe(管道)

微笑涛声
2020-04-28 / 0 评论 / 0 点赞 / 171 阅读 / 1,980 字
温馨提示:
本文最后更新于 2021-06-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在前端开发的时候经常会遇到页面显示的内容有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、在使用的地方进行引用

 <div [innerHTML]="n.content | tohtml">

二、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声明

image

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

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

image

5、HTML部分

<div [innerHTML]="news.content | html"></div>

5、对比效果

image

0

评论