前端:Angular框架与Ionic框架集成Html翻译pipe(管道)
2020-06-04 07:43
471 查看
在前端开发的时候经常会遇到页面显示的内容有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
声明
4、在使用的模块的module
里面加上PipesModule
例如在newsdetail.module.ts
里面的imports
版块加入PipesModule
5、HTML部分
<div [innerHTML]="news.content | html"></div>
5、对比效果
相关文章推荐
- ionic或angular前端框架使用jquery库
- 前端框架Angular
- 前端框架大比拼:Angularjs vs Reactjs vs Vue.js
- Web前端:简洁美观的HTML图片上传UI框架
- [前端框架搭建]requirejs+jquery+bootstarp+Angular的前端组合框架搭建详解(1)-----框架的引入与选择
- 前端UI Angular框架笔记(二):Angular框架概念介绍
- Angular学习笔记之集成第三方UI框架、组件
- 前端学习总结(七)Angular.js——以数据交互为核心的前端框架
- ionic angularjs $Resource 前端和nodejs后台配合的服务
- 充分利用HTML标签元素 – 简单的xtyle前端框架
- 2015前端各大框架比较(angular,vue,react,ant)
- 七周七种前端框架三: Angular2 之 TypeScript
- 前端学习总结(二十三)——前端框架天下三分:Angular React 和 Vue的比较
- 前端框架Vue、angular、React的优点和缺点
- Android中混合H5开发集成Ionic框架编写的Android项目
- 如何选择前端框架:ANGULAR VS EMBER VS REACT
- 前端UI Angular框架笔记(一):Angular框架入门
- REST架构网站改写:前端MVC - Angular.js,Web框架 - Express.js, 数据库 - MongoDB
- Yii框架学习笔记(二)将html前端模板整合到框架中
- angular ionic 框架对 Android 返回键 的 退出app 处理