web-dev-qa-db-fra.com

Le nettoyage des URL entraîne l'actualisation de la vidéo YouTube intégrée

J'ai un problème avec mon application AngularJS 2 (j'utilise la version RC5 d'AngularJS 2). Il semble qu'une URL filtrée déclenche la détection des modifications qui met ensuite à jour le div ci-dessous malgré l'absence de changement dans l'état de mes composants.

Du point de vue de l'utilisateur, cela se manifeste par le rechargement de la vidéo pendant la 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:

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

Dans le débogueur, je vois que le div est actualisé assez souvent, par quelque chose déclenché dans le framework 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 le nettoyage des URL est à l'origine de cela.

Est-ce que quelqu'un peut-il me montrer la bonne direction? Un exemple pratique de vidéos YouTube intégrées dont l'URL est liée à une propriété du composant, peut-être?

javascriptangularyoutube
36
ayls

Deviner.

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 changé le code pour calculer l'url de sécurité 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 que je lie maintenant à une propriété.

52
ayls

J'essaierais de l'utiliser avec pipe pure

Angular exécute un tuyau pur uniquement lorsqu'il détecte un changement pur de la valeur d'entrée. Un changement pur est soit une modification d'une valeur d'entrée primitive (chaîne, nombre, booléen, symbole) ou une référence d'objet modifiée (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 utilisez-le comme suit:

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

Exemple de Plunker (essayez de pousser le bouton)

23
yurzui

Vous pouvez conserver votre solution d'origine et utiliser simplement changeDetection: ChangeDetectionStrategy.OnPush

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

Combiné les réponses précédentes pour le faire fonctionner de cette façon:

component.ts (uniquement 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);
}

template.html

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