javascript - 使用 Angular 2 RC6 向组件提供 DomSanitizer 的正确方法

Question

我正在尝试使用 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 提供提供程序的示例吗？谢谢!

Answer 1

您不再需要声明 providers: [ DomSanitizer ]。
只需要import DomSanitizer如下图,

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

在组件中通过构造函数注入(inject)它，如下所示，

constructor(private sanitizer: DomSanitizer) {}