La desinfección de URL está causando la actualización del video de YouTube incrustado

Tengo un problema con mi aplicación AngularJS 2 (estoy usando la versión RC5 de AngularJS 2). Parece que una URL desinfectada está activando la detección de cambios que luego actualiza el div a continuación a pesar de no tener ningún cambio en el estado de mi componente.

Desde el punto de vista del usuario, esto se manifiesta como la recarga del video mientras se está reproduciendo.

Así que en mi vista de componentes tengo: 

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

La implementación de la función anterior en el código del componente es: 

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

En depurador Veo que el div se actualiza con bastante frecuencia, por algo activado en AngularJS 2 framework.

El problema desaparece, si reemplazo el fragmento HTML anterior con una URL codificada: 

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

Así que sospecho que la desinfección de URL lo está causando.

¿Puede alguien señalarme en la dirección correcta? Un ejemplo de trabajo de vídeos de YouTube incrustados que tienen su URL vinculada a una propiedad en el componente tal vez?

Author: Natty, 2016-09-10
Source

4 answers

Lo descubrí.

Para cualquier persona interesada. El problema fue el uso de esta función en mi html 

   [src]="getTrustedYouTubeUrl(item)"

El efecto secundario de recarga desapareció una vez que cambié el código para calcular la url segura cuando se cargan los datos en mi servicio y cambié el enlace iframe a este 

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

Tenga en cuenta que ahora estoy enlazando a una propiedad.

 33
Author: ayls,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-10 18:53:51

Intentaría usarlo con tubo puro

Angular ejecuta una tubería pura solo cuando detecta un cambio puro en la valor de entrada. Un cambio puro es un cambio a una entrada primitiva valor (Cadena, Número, Booleano, Símbolo) o una referencia de objeto modificada (Fecha, Matriz, Función, Objeto).

Pipe podría verse como (RC.6 - DomSanitizer se convierte en lugar de DomSanitizationService):

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

Y utilizarlo como el siguiente:

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

Ejemplo de Émbolo (trate de presionar el botón)

 18
Author: yurzui,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-10 18:51:34

Puede conservar su solución original y simplemente usar changeDetection: ChangeDetectionStrategy.OnPush 

<div *ngIf="isVideo(item)">
   <iframe [src]="getTrustedYouTubeUrl(item)" scrolling="no" frameborder="0" allowfullscreen></iframe>          
</div>
 3
Author: Murhaf Sousli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-31 21:56:09

Combinó las respuestas anteriores para que funcionara de esta manera:

Componente.ts (solo las partes 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);
}

Plantilla.html

<iframe      
  [src]='this.safeUrl'>
</iframe>
 2
Author: Anthony,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-08 16:59:11