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

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

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 {

publicorbitUrl: string;

constructor(privatesanitizer: 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(privatesanitizer: DomSanitizer) {}

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

transform(url): any {

returnthis.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 {}

作者：wyr_xiaowu

来源：https://blog.csdn.net/qq_34790644/article/details/80192674

如果给你带来帮助，欢迎微信或支付宝扫一扫，赞一下。