1

在 Angular 组件中，我们可以注入 DomSanitizer 并使用它。

@component({..})
export class myComponent{
 constructor(private sanitizer: DomSanitizer){
  //now we can use this.sanitizer.bypassSecurityTrustHtml(..)
}

}

但是如何在不将 DomSanitizer 注入构造函数的情况下使用它？

//this is not a class, so it doesn't contain a constructor() 

export function keepHtml(value: string){
 sanitizer = new DomSanitizer(); //error: Cannot create an instance of an abstract class
 return sanitizer.bypassSecurityTrustHtml(content);
}

我不想导入DomSanitizer到我的类中，然后将其作为第二个参数传递给 keepHtml()。

我希望在函数文件中完成整个实现。

我也不想将函数 keepHtml() 转换为类方法。

4

2 回答 2

2

为此使用服务（Anton Rusak 对原始帖子的回复）是可行的方法，并且允许可重用​​性。

快速示例如下：

import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root'
})
export class ServiceUsedForWhatever {

  constructor(
    private sanitizer: DomSanitizer
  ) {}

  sanitizeResource(multimediaResource) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(multimediaResource);
  }
}

并在任何组件中，导入服务并按如下方式使用它：

mediaToSanitize = this.dataService.sanitizeResource(originalMedia);

甚至可以通过添加一个监听第二个参数（例如 mediaType）的 switchcase 来改进它，以便该函数可以使用其他方法，例如 bypassSecutiryTrustHtml 或 bypassSecurityTrustUrl。

编辑：作者确实表示他们不想将其用作注入，因为它可能在通用 /functions 文件中用于将方法扩展到其他组件，我得到了这种方法。但很有可能您的项目拥有或可能拥有一个通用服务，该服务执行其他组件甚至服务可以从中受益的事情（例如获取/设置令牌）。上面的例子很适合这样的服务。

于 2021-09-23T08:09:28.753 回答
1

您可以尝试像这样使用 DomSanitizer 的内部实现：

import { ɵDomSanitizerImpl } from '@angular/platform-browser/';

export function keepHtml(value: string){
 const sanitizer = new ɵDomSanitizerImpl(document);
 return sanitizer.bypassSecurityTrustHtml(content);
}

然而，这不是一个好方法。内部实现将来可能会发生变化并破坏您的代码。

于 2020-01-18T20:56:46.953 回答