DomSanitizationService 不是一个函数 [英] DomSanitizationService is not a function

问题描述

正如人们常说的，没有所谓的愚蠢问题.

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

我已经检查了这个

以下是我项目的 TS 文件.

import { Component, OnInit, OnDestroy } from '@angular/core';从@angular/router"导入{路由器，激活路由}；从'./parcels.service'导入{ParcelsService}；从@angular/platform-b​​rowser"导入 { SafeResourceUrl, DomSanitizationService };从'./mock-parcels'导入{包裹}；@成分({模板:`<h2>包裹</h2><div *ngIf="包裹"><h3>"{{parcel.checkUrl}}"</h3><iframe 宽度=800 高度=500 src="{{safeUrl}}}"></iframe><p><button (click)="gotoHeroes()">返回</button></p>

`，提供者:[ParcelsService、DomSanitizationService]})导出类 HeroDetailComponent 实现 OnInit, OnDestroy {包裹:包裹；safeUrl : SafeResourceUrl;私人潜艇:任何；构造函数(私人路线:ActivatedRoute，专用路由器:路由器，私人服务:ParcelsService，私有消毒剂:DomSanitizationService) {}ngOnInit() {this.sub = this.route.params.subscribe(params => {让 id = +params['id'];//(+) 将字符串 'id' 转换为数字this.parcel = this.service.getParcel(id);});this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.parcel.checkUrl);}ngOnDestroy() {this.sub.unsubscribe();}gotoHeroes() { this.router.navigate(['/heroes']);}}

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

谢谢

解决方案

您必须导入并提供BROWSER_SANITIZATION_PROVIDERS:

import { BROWSER_SANITIZATION_PROVIDERS,安全资源网址，DomSanitizationService } 来自'@angular/platform-b​​rowser';

并在您的 providers 数组中:

提供者:[ParcelsService, BROWSER_SANITIZATION_PROVIDERS]

<小时><块引用>

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

import { __platform_browser_private__,安全资源网址，DomSanitizer } 来自'@angular/platform-b​​rowser';

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

providers: [ParcelsService, __platform_browser_private__, BROWSER_SANITIZATION_PROVIDERS]

<小时><块引用>

针对 ANGULAR 4+ 的更新:自 Angular 4 以来，有一些变化:

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

还有:

• __platform_browser_private__ 不再在 @angular/platform-b​​rowser 中.
• BROWSER_SANITIZATION_PROVIDERS 不再在 @angular/platform-b​​rowser 中.它现在[作为提供者] 实现到 BrowserModule 中，可以从 @angular/platform-b​​rowser 导入.
• 附言BrowserModule 通常被添加到你的 app.module模块的导入数组.

As people always say there is no question called a dumb question.

I am learning Angular 2.0 following the official tutorial now. It is using rc2.0 as I can see from the packageconfig file. I was trying to suppress the frame work complaining the "Unsafe" url in the iFrame tag.

I have checked the instructions from this Stack Overflow Question and followed everything that's been shown in the LIVE Plunker.

My VS Code doesn't complain anything in the compile time but from the Chrome inspector I can see the error.

Following are the TS file of my project.

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']); }
}

Has anyone ever come across similar issue? Please help to find what I have done wrong.

Thanks

解决方案

You have to import and provide the BROWSER_SANITIZATION_PROVIDERS:

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

and in your providers array:

providers: [ParcelsService, BROWSER_SANITIZATION_PROVIDERS]

---

UPDATE: for the final release things changed a little

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

and add it to the providers like so:

providers: [ParcelsService, __platform_browser_private__, BROWSER_SANITIZATION_PROVIDERS]

---

UPDATE FOR ANGULAR 4+: since Angular 4, there's some changes:

Now, you don't have to pass DomSanitizer to providers. You can import directly in your component and grab it in the component's constructor. Same goes for SafeResourceUrl.

Also:

• __platform_browser_private__ is no longer in @angular/platform-browser.
• BROWSER_SANITIZATION_PROVIDERS is no longer in @angular/platform-browser. It is now implemented [as a provider] into BrowserModule which can be imported from @angular/platform-browser.
• P.S. BrowserModule is usually added into your app.module module's imports array.

这篇关于DomSanitizationService 不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！