iframe 未在 angular4 应用程序中加载 src

Question

在我的应用程序中，我将 YouTube 视频加载到 iframe 中。我已经清理了网址。但是当我运行应用程序时，src 属性不会加载。

下面是html：

<a [href]="data.url" target="_blank" *ngIf="data.contentTypeString=='YOUTUBE_VIDEO' && data.url != null">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe *ngIf="data.contentTypeString=='YOUTUBE_VIDEO'" 
                        class="embed-responsive-item" 
                        src="{{data.url}}"></iframe>
            </div>
        </a>

下面是我运行相同内容时的屏幕截图：

src 只是不会加载我尝试过的 [src]=data.url。

以下是我用来清理网址的方法：

public manageYoutubeUrl(url: any) {
        console.log("url====" + url);
        var youtubeUrl = this.sanitize.bypassSecurityTrustUrl(url.replace('watch?v=', 'embed/').replace('http://', 'https://')+"?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode=transparent");
        console.log("youtubeUrl=====" + youtubeUrl);
        return youtubeUrl;
    }

当我检查 youtubeURL 日志时，它是这样的：

youtubeUrl=====SafeValue 必须使用 [property]=绑定： https://www.youtube.com/embed/l-103taCWOQ ?wmode=opaque&rel=0&autohide=1&showinfo=0&wmode= transparent （请参阅http://g. co/ng/security#xss )

错误错误：需要安全的 ResourceURL，在 DomSanitizerImpl.checkNotSafeValue 处获取了 URL（请参阅 http://g.co/ng/security#xss）（

请指导。谢谢。

Answer 1

你需要做这样的事情

TS

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

 this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url)

模板

<iframe id="frame" frameborder="0" [src]="current_url"></iframe>

评论后更新

只需做一些类似[src]="current_url"或的事情[attr.src] = ""