Question

我正在尝试在点击事件中动态地将网址添加到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;
}

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

试图将URL传递给Iframe Src Angular 2收到错误

1 个答案: