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

问题描述

正如人们常说的那样，没有一个问题叫做哑巴问题.

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

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

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.

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

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

以下是我的项目的TS文件.

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.

谢谢

推荐答案

您必须导入并提供BROWSER_SANITIZATION_PROVIDERS:

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

并在您的providers数组中:

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]

---

更新ANGULAR 4 + :自Angular 4起，发生了一些变化:

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

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

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.

也:

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

• __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屋！