angular7项目开发踩坑之iframe

因项目开发需要，需要在一个功能模块集成grafana（可视化监控指标展示工具）就用到了iframe。如果不做任何处理，把url以变量的形式赋给src。

【报错原因】

主要是安全原因，Angular会认为你赋值的url不安全。

【解决办法】

添加一个告诉angular这是一个安全的链接的管道即可。

safe.pipe.module.ts safe.pipe.ts

【代码copy】

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

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

@NgModule({

declarations: [

SafePipe

],

exports: [

SafePipe

]

})

export class SafePipeModule {}

===========================================================

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

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

@Pipe({ name: 'safe' })

export class SafePipeimplements PipeTransform {

constructor(private sanitizer: DomSanitizer) {}

transform(url) {

return this.sanitizer.bypassSecurityTrustResourceUrl(url);

}

}