javascript - domsanitizationservice - Manera correcta Proporcionar DomSanitizer a Componente con Angular 2 RC6

domsanitizer ionic 3

Question

Estoy intentando usar DomSanitizer para desinfectar una URL dinámica dentro de un Componente usando. Parece que no puedo averiguar cuál es la forma correcta de especificar un Proveedor para este servicio.

Estoy usando Angular 2.0.0-rc.6

Aquí está mi componente actual:

@Component({
templateUrl: ''./app.component.html'',
styleUrls: [ ''./app.component.css'' ],
providers: [ DomSanitizer ],
})
export class AppComponent implements OnInit
{
public url: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
let id = ''an-id-goes-here'';
let url = `https://www.youtube.com/embed/${id}`;
this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
ngOnDestroy() {}
}

Esto produce el error this.sanitizer.bypassSecurityTrustResourceUrl is not a function en tiempo de ejecución.

¿Podría alguien mostrarme un ejemplo de cómo proporcionar correctamente un Proveedor para DomSanitizer? ¡Gracias!

Answer 1

Ambos deberian funcionar

constructor(private sanitizer: DomSanitizer) {}
constructor(private sanitizer: Sanitizer) {}

Inyectar DomSanitizer es mejor porque solo este tipo proporciona los métodos necesarios sin realizar el vaciado.

Asegúrese de que ha importado el BrowserModule

@NgModule({
imports: [BrowserModule],
})

Ver también En RC.1 algunos estilos no se pueden agregar usando la sintaxis de enlace

Answer 2

Importar estos

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

definir variable

trustedDashboardUrl : SafeUrl;

Utilízalo en constructor como este.

constructor(
private sanitizer: DomSanitizer) {}

Especificar URL como esta-

this.trustedDashboardUrl =
this.sanitizer.bypassSecurityTrustResourceUrl
("URL");

A ver si esto ayuda.

Answer 3

No necesita declarar providers: [ DomSanitizer ] nunca más .
Solo necesita import DomSanitizer como se muestra abajo,

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

en componente inyectarlo a través de un constructor como abajo,

constructor(private sanitizer: DomSanitizer) {}