角度2 – 如何嵌入YouTube视频

发布时间：2020-12-17 17:36:09 所属栏目：安全来源：网络整理

导读：我有这个代码 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/emb

我有这个代码

<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"

但管道更可重复使用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!