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) {}
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 {}