ionic3 DomSanitizer加载html文件[2018-02-01]

1】：创建加载html管道使用

    （1）： ionic g pipe trustHtml,创建好管道，会自动在src文件夹下生成pipes文件夹，并且创建trust-html模块

    （2）：编辑trust-html.ts

        

import { DomSanitizer } from '@angular/platform-browser';
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'trustHtml',
})
export class TrustHtmlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer){}
    transform(html: string, args: any[]): any {
        return this.domSanitizer.bypassSecurityTrustResourceUrl(html);
    }
}

    (3）：注入依赖

          在app.module.ts中添加

          

import { PipesModule } from '../pipes/pipes.module';

      并且在imports引入

    

imports: [
    IonicModule.forRoot(MyApp,{
       mode: 'ios'
    }),
    PipesModule
  ],

2】：页面使用

    （1）页面ts

     

export class DetailPage {
  // 定义html片段地址
   htmlUrl:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  	this.htmlUrl="XXXXXXXX";
  }

      (2)页面.module.ts中引入

     

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DetailPage } from './detail';
import { PipesModule } from '../../../pipes/pipes.module';
@NgModule({
  declarations: [
    DetailPage,
  ],
  imports: [
    IonicPageModule.forChild(DetailPage),
    PipesModule
  ],
})
export class ThirdDataDetailPageModule {}

  

      (3) 页面html ，使用管道解析

<ion-content>
  <iframe  [src]="htmlUrl | trustHtml"></iframe> 
</ion-content>

3】：不使用管道

    同种原理，这里不使用管道也可以，直接将管道中处理的逻辑提取放到页面ts中，注意引入依赖