Правильный способ предоставления DomSanitizer компоненту с помощью Angular 2 RC6

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

Я использую 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? Спасибо!

Ответы

Ответ 1

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

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

в компоненте вводят его через конструктор, как показано ниже,

constructor(private sanitizer: DomSanitizer) {}

Ответ 2

Импортируйте их -

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

определить переменную -

trustedDashboardUrl : SafeUrl;

Используйте его в конструкторе, например:

constructor(
    private sanitizer: DomSanitizer) {}

Укажите URL-адрес, подобный этому -

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

Посмотрите, поможет ли это.

Ответ 3

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

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

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

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

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

См. также В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки