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(); }
}

在模板之外共享自定义Angular格式设置功能

选项1：静态导出/导入

选项2：InjectionToken

1 个答案: