20

Я пытаюсь использовать DomSanitizer для дезинфекции динамического URL-адреса в компоненте, поскольку я не могу понять, какой правильный способ указать поставщика для этой услуги.Правильный способ Предоставить DomSanitizer компоненту с угловым 2 RC6

Я использую Angular 2.0.0-rc.6

Вот мой текущий компонент:

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

Это приводит к ошибке this.sanitizer.bypassSecurityTrustResourceUrl is not a function во время выполнения.

Может ли кто-нибудь показать мне пример того, как правильно предоставить поставщика для DomSanitizer? Благодаря!

ответ

35

Вам не нужно объявлять providers: [ DomSanitizer ] больше.
Просто нужно importDomSanitizer, как показано ниже,

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

в компоненте впрыскивать через конструктор, как показано ниже,

constructor(private sanitizer: DomSanitizer) {} 
+0

Это была моя проблема. Я пытался использовать 'DomSanitizer' в качестве поставщика. Без провайдера вообще это работает как шарм. Благодаря! – kalmas

+0

добро пожаловать! – micronyks

1

Оба должны работать

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

Инъекционное DomSanitizer лучше, потому что только этот тип обеспечивает необходимые методы без литья.

Убедитесь, что вы импортировали BrowserModule

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

Смотрите также In RC.1 some styles can't be added using binding syntax

+0

должно быть 'частных дезинфицирующее: DomSanitizer' только – micronyks

+0

На самом деле оба должны работать так же https://github.com/angular/angular/blob/979657989bab4fb93faf6a207d30760faa9bd696/modules/%40angular/platform-browser/src/browser.ts # L41 –

6

Импорт these-

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

определяют с переменной

trustedDashboardUrl : SafeUrl; 

Используйте его в конструкторе, как this-

constructor(
    private sanitizer: DomSanitizer) {} 

Specifiy URL как this-

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

Смотрите, если это помогает.