web-dev-qa-db-fra.com

Manière correcte Fournissez DomSanitizer à Component avec Angular 2 RC6

J'essaie d'utiliser DomSanitizer pour assainir une URL dynamique dans un composant à l'aide de l'ordinateur. Je n'arrive pas à comprendre quelle est la manière correcte de spécifier un fournisseur pour ce service.

J'utilise Angular 2.0.0-rc.6

Voici mon composant actuel:

@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() {}
}

Cela entraîne l'erreur this.sanitizer.bypassSecurityTrustResourceUrl is not a function lors de l'exécution.

Quelqu'un pourrait-il me montrer un exemple de la manière de fournir correctement un fournisseur pour DomSanitizer? Merci!

javascriptangulartypescriptangular-servicesangular-dom-sanitizer
33
kalmas

Vous n'avez pas besoin de déclarer providers: [ DomSanitizer ] plus .
Il suffit juste de importDomSanitizer comme indiqué ci-dessous,

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

en composant l'injecter par un constructeur comme ci-dessous,

constructor(private sanitizer: DomSanitizer) {}
53
micronyks

Importez ces-

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

définir variable-

trustedDashboardUrl : SafeUrl;

Utilisez-le dans un constructeur comme celui-ci-

constructor(
    private sanitizer: DomSanitizer) {}

Spécifiez l'URL comme ceci-

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

Voir si cela aide.

9
Sanket

Les deux devraient fonctionner

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

L'injection de DomSanitizer est préférable car seul ce type fournit les méthodes nécessaires sans transtypage.

Assurez-vous d'avoir importé le BrowserModule

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

Voir aussi Dans RC.1, certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison

2
Günter Zöchbauer