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

新手上路,请多包涵

我正在尝试使用 DomSanitizer 来清理组件中的动态 URL,但我似乎无法弄清楚为该服务指定 Provider 的正确方法是什么。

我正在使用 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 正确提供 Provider 的示例吗?谢谢!

原文由 kalmas 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 556
2 个回答

您不再需要声明 providers: [ DomSanitizer ]

只需要 import DomSanitizer 如下图,

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

在组件中通过构造函数注入它,如下所示,

 constructor(private sanitizer: DomSanitizer) {}

原文由 micronyks 发布,翻译遵循 CC BY-SA 3.0 许可协议

两者都应该工作

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

注入 DomSanitizer 更好,因为只有这种类型才提供必要的方法而无需强制转换。

确保您已导入 BrowserModule

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

另见 在 RC.1 中,某些样式无法使用绑定语法添加

原文由 Günter Zöchbauer 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题