Angular 2：在所有组件中使用的函数

我有一个 Angular 2 webpack 项目，其中目前有一些在多个组件中重复的功能。我想从“主”类或组件（以有效者为准）继承所有这些组件，以便能够从所有需要它们的组件中调用我的函数。

举个例子，如果我在 3 个不同的组件中有一个函数 foo：

foo(s: string){
  console.log(s);
}

我希望您将此函数移至另一个文件/类/组件：

class parent{
  foo(s: string){
    console.log(s);
  }
}

并以某种方式从给定的组件调用我的 foo 函数。例如：

class child{
  constructor(){
    foo("Hello");
  }
}

我该如何使用 Angular 2 / Typescript 来做到这一点？

我会使用一项服务，这是我的一个应用程序的简短示例：

import {Injectable} from '@angular/core';
import * as _ from 'lodash';

@Injectable({
  providedIn: 'root' // Just do @Injectable() if you're not on Angular v6+
})

export class UtilsService {

  findObjectIndex(list: any[], obj: any, key: string): number {

    return _.findIndex(list, function(item) {
      return obj[key] === item[key];
    });
  }

  findObjectByQuery(list: any[], key: string, query: string): any {

    return _.find(list, function(item) {
      return item[key].toLowerCase() === query.toLowerCase();
    });
  }
}

然后你可以将此服务注入到任何东西中，这非常有用，并且可以让事情保持干燥。

你只需像这样注入它：

import {UtilsService} from 'app/shared';

export MyComponent {

  constructor(private utils: UtilsService) {
    utils.findObjectIndex([], {}, 'id'); // just an example usage
  }
}

EDIT:

正如 @aalielfeky 的回答所说，你可以使用静态函数。

然而，我个人会避免使用静态函数，因为它们几乎不可能正确测试，并且一旦需要在构造函数中注入将在其中一个函数中使用的东西时，就会给你带来麻烦。由于静态函数不能使用注入的任何内容。

不要犯和我一样的错误，因为你最终将不得不重写很多代码。

EDIT 2:您还可以使用另一种方法，即仅具有普通功能。如果您的函数不需要依赖项注入（对于简单的辅助函数来说通常是这种情况），那么这可能是一个好主意。只需创建一个文件，例如helpers.ts（或者如果您有许多函数，则每个函数一个文件）并执行以下操作：

export function sum(a: number, b: number) {
  return a + b;
}

或替代语法：

export sum(a: number, b: number) => {
  return a + b;
}

现在，您可以简单地使用以下任一导入语句导入它（取决于您是否将所有函数放在一个文件中或每个函数一个文件中）：

import { sum } from 'helpers';
import { sum } from 'helpers/sum';

这种方法的一个好处是，它很容易进行树摇动，并且与使用服务相比，单元测试也变得稍微容易一些，因为您不需要在测试中添加额外的代码以使服务正常工作。