DomSanitizationService 不是函数
DomSanitizationService is not a function
正如人们常说的,没有问题叫傻问题。
我正在按照官方教程学习Angular2.0。正如我从 packageconfig 文件中看到的那样,它使用的是 rc2.0。我试图抑制在 iFrame 标签中抱怨 "Unsafe" url 的框架工作。
我已经查看了中的说明
并关注 LIVE Plunker 中显示的所有内容。
我的 VS Code 在编译时没有抱怨任何东西,但是从 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']); }
}
有没有人遇到过类似的问题?请帮忙找出我做错了什么。
谢谢
您必须导入并提供 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';
并将其添加到提供程序中,如下所示:
providers: [ParcelsService, __platform_browser_private__, BROWSER_SANITIZATION_PROVIDERS]
UPDATE FOR ANGULAR 4+: since Angular 4, there's some changes:
现在,您不必将 DomSanitizer
传递给 providers
。你可以直接在你的组件中导入,然后在组件的constructor
中抓取。 SafeResourceUrl
.
也是如此
还有:
__platform_browser_private__
不再在 @angular/platform-browser
。
BROWSER_SANITIZATION_PROVIDERS
不再在 @angular/platform-browser
中。它现在 [作为提供者] 实施到 BrowserModule
中,可以从 @angular/platform-browser
导入。
- P.S。
BrowserModule
通常添加到您的 app.module
模块的导入数组。
Angular 7 的更新:导出已在 angular/platform-browser/src/private_export 中重命名为 eBROWSER_SANITIZATION_PROVIDERS。d.ts
正如人们常说的,没有问题叫傻问题。
我正在按照官方教程学习Angular2.0。正如我从 packageconfig 文件中看到的那样,它使用的是 rc2.0。我试图抑制在 iFrame 标签中抱怨 "Unsafe" url 的框架工作。
我已经查看了
我的 VS Code 在编译时没有抱怨任何东西,但是从 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']); }
}
有没有人遇到过类似的问题?请帮忙找出我做错了什么。
谢谢
您必须导入并提供 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';
并将其添加到提供程序中,如下所示:
providers: [ParcelsService, __platform_browser_private__, BROWSER_SANITIZATION_PROVIDERS]
UPDATE FOR ANGULAR 4+: since Angular 4, there's some changes:
现在,您不必将 DomSanitizer
传递给 providers
。你可以直接在你的组件中导入,然后在组件的constructor
中抓取。 SafeResourceUrl
.
还有:
__platform_browser_private__
不再在@angular/platform-browser
。BROWSER_SANITIZATION_PROVIDERS
不再在@angular/platform-browser
中。它现在 [作为提供者] 实施到BrowserModule
中,可以从@angular/platform-browser
导入。- P.S。
BrowserModule
通常添加到您的app.module
模块的导入数组。
Angular 7 的更新:导出已在 angular/platform-browser/src/private_export 中重命名为 eBROWSER_SANITIZATION_PROVIDERS。d.ts