web-dev-qa-db-ja.com

Iframe srcを設定する方法 Angular 2 "安全でない値"例外を発生させずに？

AngularJSの経験がなく、iframeのsrc属性の設定に関するチュートリアルに取り組んでいるAngular 2は初めてです。

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

これは例外を投げます：

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

私は既に[src]を使ったバインディングの使用を試みましたが成功しませんでした。私はおそらく何かが足りないので、これに対する解決策を見つけるのに苦労しました。

angulariframe
124
TJ.

更新

RC.6 ^ version use DomSanitizer

プランカー

そのためには、純粋なパイプを使用することをお勧めします。

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

新しいSafePipeをAppModuleのdeclarations配列に追加することを忘れないでください。 （ ドキュメントに見られるように ）

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

html

<iframe width="100%" height="300" [src]="url | safe"></iframe>

プランカー

embedタグを使用する場合、これはあなたにとって面白いかもしれません：

旧バージョンRC.5

このようにDomSanitizationServiceを活用できます。

export class YourComponent {
  url: SafeResourceUrl;
  constructor(sanitizer: DomSanitizationService) {
    this.url = sanitizer.bypassSecurityTrustResourceUrl('your url');
  }
}

そして、テンプレートのurlにバインドします。

<iframe width="100%" height="300" [src]="url"></iframe>

以下のインポートを追加することを忘れないでください。

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

プランカーサンプル

266
yurzui

これは私のために働きます。

import { Component,Input,OnInit} from '@angular/core';
import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser';

@Component({
    moduleId: module.id,
    selector: 'player',
    templateUrl: './player.component.html',
    styleUrls:['./player.component.scss'],

})
export class PlayerComponent implements OnInit{
    @Input()
    id:string; 
    url: SafeResourceUrl;
    constructor (public sanitizer:DomSanitizer) {
    }
    ngOnInit() {
        this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id);      
    }
}
21
vikvincer

これは私をAngular 5.2.0にします

sarasa.Component.ts 

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-sarasa',
  templateUrl: './sarasa.component.html',
  styleUrls: ['./sarasa.component.scss']
})

export class Sarasa implements OnInit {
  @Input()
  url: string = "https://www.mmlpqtpkasjdashdjahd.com";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

}

sarasa.Component.html 

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

それはすべての人です！

9
Lrodriguez84
constructor(
 public sanitizer: DomSanitizer, ) {

 }

私は4時間奮闘していました。問題はimgタグにありました。あなたが角括弧を 'src'に使うときex：[src]。この角度表現{{}}は使えません。下記のオブジェクト例から直接与えてください。角度表現{{}}を与えた場合補間エラーになります。

  1. 最初にngForを使って国を繰り返しました

    *ngFor="let country of countries"

  2. 次に、これをimgタグに入れます。これです。

    <img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
height="20" width="20" alt=""/>
7
Kumaresan Perumal