Façon correcte de fournir un DomSanitizer à un composant avec Angular 2 RC6

Question

J'essaie d'utiliser DomSanitizer pour assainir une URL dynamique dans un composant en me servant de ce que je n'arrive pas à trouver 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 suivante this.sanitizer.bypassSecurityTrustResourceUrl is not a function au moment de l'exécution.

Quelqu'un pourrait-il me montrer un exemple de la façon de fournir correctement un fournisseur pour DomSanitizer ? Merci !

Answer 1

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

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

dans le composant l'injecter via un constructeur comme ci-dessous,

constructor(private sanitizer: DomSanitizer) {}

Answer 2

Importez ces

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

définir variable-

trustedDashboardUrl : SafeUrl;

Utilisez-le dans le constructeur comme ceci-

constructor(
    private sanitizer: DomSanitizer) {}

Spécifiez l'URL comme ceci-

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

Voyez si cela vous aide.

Answer 3

C'est plus facile si vous pouvez ajouter un tuyau personnalisé pour SanitizedHtmlPipe . parce que nous pouvons utiliser globalement dans le projet angulaire :

• sanitized-html.pipe.ts

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser'
  @Pipe({
    name: 'sanitizedHtml'
  })
  export class SanitizedHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value: any): any {
      return this.sanitized.bypassSecurityTrustHtml(value);
    }
  }

• héros.composant.html

  <div [innerHTML]="htmlString | sanitizedHtml"></div>

• hero.component.ts

  import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css']
  })
  export class HeroComponent implements OnInit {
    htmlString: any;
    constructor() { }
    ngOnInit(): void {
      this.htmlString = `
      <div class="container">
        <header class="blog-header py-3">
          <div class="row flex-nowrap justify-content-between align-items-center">
            <div class="col-4 pt-1">
              <a class="text-muted" href="#">Subscribe</a>
            </div>
            <div class="col-4 text-center">
              <a class="blog-header-logo text-dark" href="#">Large</a>
            </div>
            <div class="col-4 d-flex justify-content-end align-items-center">
              <a class="text-muted" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
              </a>
              <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
            </div>
          </div>
        </header>
      </div>`;
    }
  }

Pour plus d'informations, vous pouvez consulter le site suivant lien

Answer 4

Les deux devraient fonctionner

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

Injecter DomSanitizer est meilleur car seul ce type fournit les méthodes nécessaires sans casting.

Assurez-vous que vous avez importé le BrowserModule

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

Voir aussi Dans la RC.1, certains styles ne peuvent pas être ajoutés en utilisant la syntaxe de liaison.