angular2 显示后端返回的html 安全转换

大佬教程收集整理的这篇文章主要介绍了angular2 显示后端返回的html 安全转换，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1、上传文件回显缩略图@H_616_1@

<input type="file" name="fileUpload" [(ngModel)]="fileUpload"
 (changE)="sendImg($event)"/>

sendImg(event) {
    let url = window.URl.createObjectURL(event.srcElement.files[0]);
}
// 获取到一个不安全的临时图片链接地址

2、在angular2中使用，定义管道，过滤@H_616_1@

import { Pipe,PipeTransform,SecurityContext } from '@angular/core';
import { DomSanitizer,SafeHtml,SafeStyle,SafeScript,SafeUrl,SaferesourceUrl } from '@angular/platform-browser';
@Pipe({
    name: 'safe'
})
export class SafePipe implements PipeTransform {
    constructor(protected dom: DomSanitizer) {}
    public transform(value: String,type: String): SafeHtml | SafeStyle | SafeScript | SafeUrl | SaferesourceUrl {
    switch (typE) {
                  case 'html':
                    return this.dom.bypassSecurityTrustHtml(value);
                  case 'style':
                    return this.dom.bypassSecurityTrustStyle(value);
                  case 'script':
                    return this.dom.bypassSecurityTrustScript(value);
                  case 'url':
                    return this.dom.bypassSecurityTrusturl(value);
                  case 'resourceUrl':
                    return this.dom.bypassSecurityTrustresourceUrl(value);
                  default:
                    return value;
         }
    }
}

使用
<div [innerHTML]="html | safe:'html'"></div>

参考链接：https://github.com/oppoffice/...@H_616_1@

大佬总结

以上是大佬教程为你收集整理的angular2 显示后端返回的html 安全转换全部内容，希望文章能够帮你解决angular2 显示后端返回的html 安全转换所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。