尝试将 URL 传递到 Iframe Src Angular 2 得到错误

Question

我正在尝试在点击事件中将 URL 动态添加到 iframe src，但出现此错误

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '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);
  }

}

对正在发生的事情有什么想法吗？

Answer 1

我建议使用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;
}

希望它有效！如果没有，请分享。