angular4实现嵌入网页-iframe，并实现安全url(safe管道)-angular的DomSanitizer

1.  html中利用iframe嵌入网页orbitUrl，“|safe”运用angular4管道的知识

< iframe id= 'orbitIframe' [ src]= "orbitUrl|safe" width= "100%" height= "100%" frameborder= "0" align= "center" ></ iframe >

2. ts中把

import { Component, OnInit } from "@angular/core";

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

import { orbitConfig } from "../../../config/config";

@ Component({

selector: "orbit",

templateUrl: "./orbit.component.html",

styleUrls: [ "./orbit.component.css"]

})

export class OrbitComponent implements OnInit {

public orbitUrl: string;

constructor( private sanitizer: DomSanitizer) {

this. orbitUrl = orbitConfig. url; url是http://:8080,即网页的服务器地址

}

ngOnInit() {}

}

3. 编写safe管道安全（编写管道的用途是可以把数据匹配成想要的数据）

    

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

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

/**

* safe管道

* 将url转换为angular 中 iframe可以识别的安全url链接

*

* @export

* @class SafePipe

* @implements {PipeTransform}

*/

@ Pipe({

name: "safe"

})

export class SafePipe implements PipeTransform {

constructor( private sanitizer: DomSanitizer) {}

// Angular 2 中提供的  DomSanitizer  服务，可以让url变得安全

transform( url): any {

return this. sanitizer. bypassSecurityTrustResourceUrl( url);

}

}

4. 管道一定要declarations中声明

  

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

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

import { SafePipe } from "./pipe/safe.pipe";

@ NgModule({

imports: [ CommonModule],

declarations: [ SafePipe]

})

export class OrbitForecastModule {}