问题描述
正如人们常说的那样,没有一个问题叫做哑巴问题.
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.
我已经检查了此并遵循LIVE Plunker中显示的所有内容.
I have checked the instructions from this Stack Overflow Questionand 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]
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]
现在,您不必将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] intoBrowserModule
which can be imported from@angular/platform-browser
.- P.S.
BrowserModule
is usually added into yourapp.module
module's imports array.
这篇关于DomSanitizationService不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!