Este grupo especializado pasados varios días de investigación y de recopilar de información, dieron con los datos necesarios, nuestro deseo es que te sea útil para tu trabajo.

Solución:

Tubo

// Angular
import  Pipe, PipeTransform  from '@angular/core';
import  DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl  from '@angular/platform-browser';

/**
 * Sanitize HTML
 */
@Pipe(
  name: 'safe'
)
export class SafePipe implements PipeTransform  SafeResourceUrl 
    switch (type) 
      case 'html':
        return this._sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this._sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this._sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this._sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this._sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        return this._sanitizer.bypassSecurityTrustHtml(value);
    
  

Plantilla

 data.url 

¡Eso es todo!

Nota: no debería necesitarlo, pero aquí está el uso de componentes de la tubería

  // Public properties
  itsSafe: SafeHtml;

  // Private properties
  private safePipe: SafePipe = new SafePipe(this.domSanitizer);

  /**
   * Component constructor
   *
   * @param safePipe: SafeHtml
   * @param domSanitizer: DomSanitizer
   */
  constructor(private safePipe: SafePipe, private domSanitizer: DomSanitizer) 
  

  /**
   * On init
   */
  ngOnInit(): void 
    this.itsSafe = this.safePipe.transform('
Hi
', 'html');
  

Estoy usando rc.4 y este método funciona para ES2015 (ES6):

import DomSanitizationService from '@angular/platform-browser';

@Component(
  templateUrl: 'build/pages/veeu/veeu.html'
)
export class VeeUPage 
  static get parameters() 
    return [NavController, App, MenuController, DomSanitizationService];
  

  constructor(nav, app, menu, sanitizer) 

    this.app = app;
    this.nav = nav;
    this.menu = menu;
    this.sanitizer = sanitizer;    
  

  photoURL() 
    return this.sanitizer.bypassSecurityTrustUrl(this.mediaItems[1].url);
  

En el HTML:

El uso de una función garantizará que el valor no cambie después de desinfectarlo. También tenga en cuenta que la función de desinfección que utilice depende del contexto.

Para imágenes, bypassSecurityTrustUrl funcionará, pero para otros usos debe consultar la documentación:

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

La forma más elegante de arreglar esto: usar tubería. Aquí hay un ejemplo (mi blog). Entonces puedes simplemente usar url | safe tubería para eludir la seguridad.

Consulte la documentación de npm para obtener más detalles: https://www.npmjs.com/package/safe-pipe

Reseñas y calificaciones de la guía

Si te gustó nuestro trabajo, puedes dejar una noticia acerca de qué te ha impresionado de esta sección.

---

---

Utiliza Nuestro Buscador