在模板之外共享自定义 Angular 格式化函数

Question

如果在模板之外需要自定义 Angular 格式化/管道函数，那么 Angular 共享该函数的方式是什么？通过静态导出/导入还是通过InjectionToken？

选项 1：静态导出/导入

export myFormatter(value: string): string {
  return ...
}

在服务中使用：

import { myFormatter } from 'my-formatter';

export class SomeService {
  ...
  const formattedValue = myFormatter(value);
  ... 
}

选项 2：InjectionToken

export const MY_FORMATTER = new InjectionToken('My Formatter', {
  providedIn: 'root',
  factory: () => (value: string) => { return ... }),
});

在服务中使用：

import { MY_FORMATTER } from 'my-formatter';

export class SomeService {
  ...
  const myFormatter = this.injector.get(MY_FORMATTER);
  const formattedValue = myFormatter(value);
  ... 
}

我最初的直觉告诉我使用 InjectionToken 来利用 Angular 的依赖注入系统。另一方面，Angular exposes their formatting functions as of Angular 6 without the use of InjectionTokens。这就提出了一个问题，为什么 Angular 不将 DI 用于自己的格式化函数，我们应该如何共享这些函数？

Answer 1

不要依赖 Angular，因为它会使用复杂的函数在不同的特性之间共享您的代码。

相反，考虑依赖 Typescript，通过制作一个可导出的函数：

export function myFormatter(value: string): string {
  return ...
}

在你的功能中：

import { myFormatter } from 'path/to/file';

export class MyComponent {
  myFormatter = myFormatter;
}

你也可以从中创建一个超类：

export class FormatterUtils {
  myFormatter(value: string): string {
    return ...
  }
}

在你的功能中

import { FormatterUtils } from 'path/to/file';

export class MyComponent extends FormatterUtils {
  constructor() { super(); }
}