DomSanitizationService 不是函数答案

【问题标题】：DomSanitizationService is not a functionDomSanitizationService 不是函数
【发布时间】：2016-07-13 13:44:15
【问题描述】：

正如人们常说的，没有什么问题叫做愚蠢的问题。

我现在正在按照官方教程学习 Angular 2.0。正如我从 packageconfig 文件中看到的那样，它使用的是 rc2.0。我试图压制框架工作，抱怨 iFrame 标记中的“不安全”网址。

我已经检查了来自Stack Overflow Question 的说明并遵循 LIVE Plunker 中显示的所有内容。

我的 VS 代码在编译时没有抱怨任何东西，但从 Chrome 检查器中我可以看到错误。

以下是我项目的 TS 文件。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute }       from '@angular/router';
import { ParcelsService } from './parcels.service';
import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';
import { Parcel } from './mock-parcels';
@Component({
  template: `
  <h2>Parcels</h2>
  <div *ngIf="parcel">
    <h3>"{{parcel.checkUrl}}"</h3>
    <iframe width=800 height=500 src="{{safeUrl}}}"></iframe>

    <p>
      <button (click)="gotoHeroes()">Back</button>
    </p>
  </div>
  `,
  providers:[ParcelsService, DomSanitizationService]
})
export class HeroDetailComponent implements OnInit, OnDestroy  {
  parcel: Parcel;
  safeUrl : SafeResourceUrl;
  private sub: any;
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private service: ParcelsService,
    private sanitizer: DomSanitizationService) {}
  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       let id = +params['id']; // (+) converts string 'id' to a number
       this.parcel = this.service.getParcel(id);
     });
     this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.parcel.checkUrl);

  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
  gotoHeroes() { this.router.navigate(['/heroes']); }
}

有没有人遇到过类似的问题？请帮忙找出我做错了什么。

谢谢

【问题讨论】：

标签： angularjs angular angular2-services

【解决方案1】：

您必须导入并提供BROWSER_SANITIZATION_PROVIDERS:

import { BROWSER_SANITIZATION_PROVIDERS, 
         SafeResourceUrl, 
         DomSanitizationService } from '@angular/platform-browser';

在您的providers 数组中：

providers: [ParcelsService, BROWSER_SANITIZATION_PROVIDERS]

更新：对于最终版本，情况发生了一些变化

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

并将其添加到提供程序，如下所示：

providers: [ParcelsService, __platform_browser_private__, BROWSER_SANITIZATION_PROVIDERS]

更新 Angular 4+：自 Angular 4 以来，有一些变化：

现在，您不必将DomSanitizer 传递给providers。您可以直接在您的组件中导入并在组件的constructor 中获取它。 SafeResourceUrl 也是如此。

还有：

__platform_browser_private__ 不再在 @angular/platform-browser 中。
BROWSER_SANITIZATION_PROVIDERS 不再在 @angular/platform-browser 中。它现在 [作为提供者] 实施到 BrowserModule 中，可以从 @angular/platform-browser 导入。
附注BrowserModule 通常会添加到您的 app.module 模块的导入数组。

【讨论】：

【解决方案2】：

Angular 7 更新：导出已在 angular/platform-browser/src/private_export.d.ts 中重命名为 eBROWSER_SANITIZATION_PROVIDERS

【讨论】：