我有这个代码
<div *ngIf="topic.video">
<div class="video-container">
<iframe width="300" height="169" src="topic.video.url" style="border:0"></iframe>
</div>
</div>
问题：angular将输出src =“localhost：// 8001”而不是src =“https://www.youtube.com/embed/hr4BbdUiTUM”
这可能有什么问题？
更新2
这是Gunter回答之后的结果.
import { Component,OnInit,Pipe,Sanitizer } from '@angular/core';
import { DataService } from '../../shared/data';
@Component({
template: `
<div class="subheader">Feed</div>
<div *ngFor="let topic of topics; let index = index; trackBy: trackByFn">
<div *ngIf="topic.type == 'discussion'">
<div *ngIf="topic.video">
<div class="video-container">
<iframe src="{{sanitizer.bypassSecurityTrustResourceUrl(topic.video.url)}}" ></iframe>
</div>
</div>
</div>
</div>
`
})
export class CompanyComponent implements OnInit {
constructor(
private sanitizer:Sanitizer,private dataService: DataService
) {}
ngOnInit() {
this.topics = this.dataService.topics;
}
}
我仍然有这个错误
company.ts?ac6a:121 Error: Uncaught (in promise): Error: Error in ./CompanyComponent class CompanyComponent - inline template:29:41 caused by: unsafe value used in a resource URL context (see http://g.co/ng/security#xss) Error: unsafe value used in a resource URL context (see
解决方法
如果要从变量中获取URL,则需要使用[]或{{}}来启用绑定(同时,两者不同,{{}}仅适用于字符串,而不适用于对象或数组)：
[src]="topic.video.url"
要么
src="{{topic.video.url}}"
如果DOM清理程序删除了URL,则可以使用In RC.1 some styles can’t be added using binding syntax中所示的管道
import { Pipe,DomSanitizer } from '@angular/core';
@Pipe({name: 'safeResourceUrl'})
export class SafeResourceUrl {
constructor(private sanitizer:DomSanitizer){}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
[src]="topic.video.url | safeResourceUrl"
你也可以申请
this.myUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.topic.video.url);
并绑定到此
[src]="myUrl"
但管道更可重复使用.
