角度清洁剂 - YouTube iframe的例外

问题描述：

我有一个返回HTML代码的API（其中包含iframe对象）。角度清洁剂 - YouTube iframe的例外

发送到客户端的代码如下所示：

<p>Something blabla</p> 
<iframe allowfullscreen="true" frameborder="0" height="270" src="https://www.youtube.com/embed/someID?feature=oembed" width="480"></iframe>

现在，我怎么能在YouTube添加一个例外，仅清洁剂？问题是，HTML代码是用户输入（并非完全用户输入，但仅限于我信任的人，因此我猜这没有安全风险），所以我不能使用bypassSecurityTrustResourceUrl，对吧？

我的代码（page.component.ts）

constructor(private _router: Router, private _http: Http, private _sanitizer: DomSanitizer) { 
    this.fetchNews(); 
} 

fetchNews() { 
    this._http 
     .get(this.urlAPI) 
     .map((response: Response) => { 
     let json = response.json(); 
     this.content = json.results[0].content; 
     }).subscribe(); 
}

和HTML（page.component.html）：

<div [innerHTML]="content"> 
</div>

没有你发现同样的任何解决方案，因为我也面临同样的问题 –

不幸的是没有，但如果我这样做，我会在这里发布的解决方案。 – GTX

答

只需用创建管道CLI

离子g管Youtube

然后导入domsanatizer在管文件

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

进口管在app.module.ts

import {Youtube } from '../pipes/youtube';

然后在声明

申报管见下文youtube.ts管道文件

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

/** 
* Generated class for the Youtube pipe. 
* 
* See https://angular.io/docs/ts/latest/guide/pipes.html for more info on 
* Angular Pipes. 
*/ 
@Pipe({ 
    name: 'youtube', 
}) 
export class Youtube implements PipeTransform { 
    constructor (private dom:DomSanitizer) { 

    } 
    transform(value: string, args) { 
    return this.dom.bypassSecurityTrustHtml(value); 
    } 
}

最后一步你的HTML代码：

<div [innerHTML]="content | youtube"> 
</div>

角度清洁剂 - YouTube iframe的例外

相关推荐