使用 Angular 2 RC6 向组件提供 DomSanitizer 的正确方法
Correct way Provide DomSanitizer to Component with Angular 2 RC6
我正在尝试使用 DomSanitizer 清理组件中的动态 URL 我似乎无法弄清楚为此服务指定提供程序的正确方法是什么。
我正在使用 Angular 2.0.0-rc.6
这是我当前的组件:
@Component({
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
providers: [ DomSanitizer ],
})
export class AppComponent implements OnInit
{
public url: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
let id = 'an-id-goes-here';
let url = `https://www.youtube.com/embed/${id}`;
this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
ngOnDestroy() {}
}
这会导致运行时出现错误 this.sanitizer.bypassSecurityTrustResourceUrl is not a function
。
谁能告诉我如何为 DomSanitizer 正确提供 Provider 的示例?谢谢!
两者都应该有效
constructor(private sanitizer: DomSanitizer) {}
constructor(private sanitizer: Sanitizer) {}
注入 DomSanitizer
更好,因为只有这种类型提供了必要的方法而无需强制转换。
确保您已导入 BrowserModule
@NgModule({
imports: [BrowserModule],
})
另见
您不再需要声明 providers: [ DomSanitizer ]
。
只需要import
DomSanitizer
如下图,
import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';
在组件中通过构造函数注入它,如下所示,
constructor(private sanitizer: DomSanitizer) {}
导入这些-
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
定义变量-
trustedDashboardUrl : SafeUrl;
像这样在构造函数中使用它-
constructor(
private sanitizer: DomSanitizer) {}
像这样指定URL-
this.trustedDashboardUrl =
this.sanitizer.bypassSecurityTrustResourceUrl
("URL");
看看这是否有帮助。
如果您可以为 SanitizedHtmlPipe 添加自定义管道,那就更容易了。因为我们可以在 angular 项目中全局使用:
- 已消毒-html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
name: 'sanitizedHtml'
})
export class SanitizedHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value: any): any {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
- hero.component.html
<div [innerHTML]="htmlString | sanitizedHtml"></div>
- hero.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
htmlString: any;
constructor() { }
ngOnInit(): void {
this.htmlString = `
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>
</div>`;
}
}
更多信息你可以访问这个link
我正在尝试使用 DomSanitizer 清理组件中的动态 URL 我似乎无法弄清楚为此服务指定提供程序的正确方法是什么。
我正在使用 Angular 2.0.0-rc.6
这是我当前的组件:
@Component({
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
providers: [ DomSanitizer ],
})
export class AppComponent implements OnInit
{
public url: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
let id = 'an-id-goes-here';
let url = `https://www.youtube.com/embed/${id}`;
this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
ngOnDestroy() {}
}
这会导致运行时出现错误 this.sanitizer.bypassSecurityTrustResourceUrl is not a function
。
谁能告诉我如何为 DomSanitizer 正确提供 Provider 的示例?谢谢!
两者都应该有效
constructor(private sanitizer: DomSanitizer) {}
constructor(private sanitizer: Sanitizer) {}
注入 DomSanitizer
更好,因为只有这种类型提供了必要的方法而无需强制转换。
确保您已导入 BrowserModule
@NgModule({
imports: [BrowserModule],
})
另见
您不再需要声明 providers: [ DomSanitizer ]
。
只需要import
DomSanitizer
如下图,
import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';
在组件中通过构造函数注入它,如下所示,
constructor(private sanitizer: DomSanitizer) {}
导入这些-
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
定义变量-
trustedDashboardUrl : SafeUrl;
像这样在构造函数中使用它-
constructor(
private sanitizer: DomSanitizer) {}
像这样指定URL-
this.trustedDashboardUrl =
this.sanitizer.bypassSecurityTrustResourceUrl
("URL");
看看这是否有帮助。
如果您可以为 SanitizedHtmlPipe 添加自定义管道,那就更容易了。因为我们可以在 angular 项目中全局使用:
- 已消毒-html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Pipe({
name: 'sanitizedHtml'
})
export class SanitizedHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value: any): any {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
- hero.component.html
<div [innerHTML]="htmlString | sanitizedHtml"></div>
- hero.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
htmlString: any;
constructor() { }
ngOnInit(): void {
this.htmlString = `
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>
</div>`;
}
}
更多信息你可以访问这个link