La désinfection de l'URL entraîne l'actualisation de la vidéo YouTube intégrée.

Question

J'ai un problème avec mon application AngularJS 2 (j'utilise la version RC5 d'AngularJS 2). Il semble qu'une URL aseptisée déclenche une détection de changement qui met ensuite à jour le fichier div ci-dessous alors que l'état de mon composant n'a pas changé.

Du point de vue de l'utilisateur, cela se manifeste par le rechargement de la vidéo en cours de lecture.

Donc, dans ma vue des composants, j'ai :

<div *ngIf="isVideo(item)">
   <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>          
</div>

L'implémentation de la fonction ci-dessus dans le code du composant est la suivante :

getTrustedYouTubeUrl(linkedVideo:LinkedVideoModel) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(linkedVideo.video.url);
}    

Dans le débogueur, je vois que la division est rafraîchie assez souvent, par quelque chose déclenché dans le cadre d'AngularJS 2.

Le problème disparaît si je remplace l'extrait HTML ci-dessus par une URL codée en dur :

<div *ngIf="isVideo(item)">
   <iframe src="<hardcoded youtube url here>" scrolling="no" frameborder="0" allowfullscreen></iframe>          
</div> 

Je soupçonne donc que la désinfection des URL en est la cause.

Quelqu'un peut-il m'indiquer la bonne direction ? Un exemple fonctionnel de vidéos YouTube intégrées dont l'URL est liée à une propriété du composant, par exemple ?

Answer 1

J'ai compris.

Pour toute personne intéressée. Le problème était l'utilisation de cette fonction dans mon html

   [src]="getTrustedYouTubeUrl(item)"

L'effet secondaire de rechargement a disparu une fois que j'ai modifié le code pour calculer l'url sécurisée lorsque les données sont chargées dans mon service et que j'ai changé la liaison iframe en ceci

    <iframe [src]="item.video.safeUrl" scrolling="no" frameborder="0" allowfullscreen></iframe>    

Notez quer je suis maintenant lié à une propriété.

Answer 2

J'essaierais de l'utiliser avec tuyau pur

Angular n'exécute un pipe pur que lorsqu'il détecte une modification pure de l'objet valeur d'entrée. Un changement pur est soit un changement de valeur d'entrée primitive (String, Number, Boolean, Symbol), soit un changement de référence d'objet. primitive (String, Number, Boolean, Symbol) ou une référence d'objet modifiée (Date, Array). (Date, Tableau, Fonction, Objet).

Le tuyau pourrait ressembler à ( RC.6 - DomSanitizer devient au lieu de DomSanitizationService ):

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

Et l'utiliser comme le suivant :

<iframe [src]="url | safe" frameborder="0" allowfullscreen></iframe> 

Exemple de Plunker (essaie d'appuyer sur le bouton)

Answer 3

J'ai combiné les réponses précédentes pour le faire fonctionner de cette façon :

component.ts (seulement les parties pertinentes)

import { DomSanitizer } from '@angular/platform-browser';

constructor( 
  private sanitizer: DomSanitizer   
) {
  this.sanitizer = sanitizer;
}

ngOnInit() {
 this.getTrustedUrl('http://someUrl');
}

getTrustedUrl(url:any){ 
 this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

modèle.html

<iframe      
  [src]='this.safeUrl'>
</iframe>

Answer 4

Vous pouvez conserver votre solution originale et utiliser simplement changeDetection: ChangeDetectionStrategy.OnPush

<div *ngIf="isVideo(item)">
   <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>          
</div>

Answer 5

<iframe #ytplayer  width="100%" height="235" frameborder="0" src="">
</iframe>    

@ViewChild('ytplayer', null) ytPlayer: ElementRef;

ngOnInit() {
  this.ytPlayer.nativeElement.src = this.act.iframe;
}

Le rechargement se produit à cause de l'utilisation de sanitizer.bypassSecurityTrustResourceUrl. Nous ne devrions donc pas l'utiliser. Je pense que c'est plus confortable. Merci.