angular - 创建抽象类 DomSanitizer 的实例

Question

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

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

}

但是如何使用 DomSanitizer 而不将其注入(inject)到构造函数中？

//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() 转换为类方法。

Answer 1

为此使用服务(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。

编辑:作者确实表示他们不想将其用作注入(inject)，因为它可能在公共(public)/functions 文件中使用以将方法扩展到其他组件，我得到了这种方法。但您的项目很可能拥有或可能拥有一个通用服务，该服务可以执行其他组件甚至服务可以从中受益的功能(例如获取/设置 token )。上面的示例非常适合这样的服务。