我尝试在点击事件上将 URL 动态添加到 iframe src
中,但收到此错误
错误:未捕获( promise 中):错误:无法匹配任何路由。 URL 段:'SafeValue%20must%20use%20%5Bproperty%5D'
我使用 domSanitizer 使 URL 能够安全地插入到 iframe
HTML
<div class="cards-wrapper">
<div class="prepackaged__card" *ngFor="let video of videos">
<img class="prepackaged__card-header" src="{{video.thumbnail}}">
<div class="prepackaged__card-body">
<div class="category">{{video.subname}}</div>
<h2 class="title">{{video.name}}
</h2>
<button (click)="sendUrl(video.videoData)">PLAY VIDEO</button>
</div>
</div>
</div>
<div class="video-player-modal">
<div class="video-player-modal_header">
</div>
<div class="video-player-modal_video">
<iframe class="video-player-modal_video_player" src="" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { DashboardServiceProxy, UserVideoDto } from '@shared/service-proxies/service-proxies';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
declare var jQuery: any;
const $ = jQuery;
@Component({
selector: 'app-video',
templateUrl: './video.component.html',
styleUrls: ['./video.component.scss'],
providers: [
DashboardServiceProxy
]
})
export class VideoComponent implements OnInit {
videos: UserVideoDto[] = [];
trustedDashboardUrl: SafeUrl;
constructor(
private _dashboardService: DashboardServiceProxy,
private sanitizer: DomSanitizer
) {
}
ngOnInit() {
this.getVideos();
}
getVideos() {
this._dashboardService.getAllUserVideos().subscribe((result) => {
this.videos = result;
console.log(this.videos);
});
}
sendUrl(playerUrl) {
this.trustedDashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(playerUrl);
$('.video-player-modal_video_player').attr('src', this.trustedDashboardUrl);
}
}
对正在发生的事情有什么想法吗?
最佳答案
我建议使用 property binding而不是使用 jQuery 动态填充属性。其过程如下:
将 src 属性设置为初始化为空字符串的组件成员变量:
[src]="iframeURL"
在您的组件文件中设置 iframeURL:
iframeURL = '';
按如下方式修改您的点击事件处理程序:
sendUrl(playerUrl) {
// this.iframeURL = playerUrl // try it first, if it doesn't work use the sanitized URL
this.trustedDashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(playerUrl);
this.iframeURL = this.trustedDashboardUrl;
}
希望它有效!如果没有,请分享。
关于javascript - 尝试将 URL 传递到 Iframe Src Angular 2 时出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47666331/