Iframes Angular2

importer { Component } '@angulaire de base";

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
<iframe src="http://hssa:1021/Home?testRequestId=+[testRequestId]+" allowfullscreen></iframe>`,
})
export class AppComponent  {
    name = 'Angular';
    testRequestId = '3224';

}

J'ai mon .ts fichier comme indiqué ci-dessus. Comment puis-je passer testRequestId html.

Double Possible de Comment définir iframe src Angulaire 2 sans causer de " dangereux valeur` exception?

OriginalL'auteur test | 2017-02-03

  1. 11

    essayez ceci:

    Démo en ligne

    Sûr Pipe

    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: string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

    AppComponent

    import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <iframe [src]="'https://www.youtube.com/embed/' + testRequestId | safe" width="560" height="315" allowfullscreen></iframe>
  `
})
export class AppComponent {
  testRequestId: string = 'uelHwf8o7_U';

}

    parce que Angulaires pas confiance à n'importe quelle source, il va assainir le contenu, puis nous avons besoin de le contourner.

    En savoir plus sur ce sujet: https://angular.io/docs/ts/latest/guide/security.html

    La syntaxe du modèle

    Si je change comme mentionné, il donne l'URL sur le débogage comme ce hssa:1021/Home?testRequestId=, qui ne fonctionnent pas. Le testRequestId est passé comme vide ici.
    la caisse mis à jour mon post
    Je l'ai fait et j'obtiens cette erreur.
    Code de sévérité Description du Fichier de Projet Ligne de Suppression de l'État d'Erreur TS7006 Paramètre " url " implicitement a 'tout' type.
    hein, ce n'est pas Angulaire bug, VS outil de construction. testRequestId: string = 'uelHwf8o7_U';

    OriginalL'auteur Tiep Phan

  2. 1

    Il suffit de changer +[testRequestId]+ à {{testRequestId}}.

    import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
<iframe src="http://hssa:1021/Home?testRequestId={{testRequestId}}"    allowfullscreen></iframe>`,
})
export class AppComponent  {
    name = 'Angular';
    testRequestId = '3224';
}
    Si je change comme mentionné, il donne l'URL sur le débogage comme ceci hssa:1021/Home?testRequestId={{testRequestId}}, qui ne fonctionnent pas.
    Vous pouvez voir ici stackoverflow.com/questions/38037760/...

    OriginalL'auteur Bruno João