class - Angular 2 : Functions to be used across all components

Question

我有一个 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 执行此操作？

Answer 1

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

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

然后您可以将此服务注入(inject)到任何东西中，这非常有用并且您可以保持内容干燥。

你可以像这样简单地注入(inject)它:

import {UtilsService} from 'app/shared';

export MyComponent {

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

编辑:

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

但是，我个人会避免使用静态函数，因为它们几乎无法正确测试，而且一旦需要在构造函数中注入(inject)将在其中一个函数中使用的内容，就会让你见鬼去吧。因为静态函数不能使用任何注入(inject)的东西。

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

编辑 2:您还可以使用另一种方法，即仅具有正常功能。如果您的函数不需要依赖注入(inject)，这可能是个好主意，简单的辅助函数通常就是这种情况。只需创建一个文件，例如 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';

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