Angular 2：要跨所有组件使用的功能

Question

我有一个 angular 2 webpack 项目，我目前有一些功能在多个组件中重复出现。我想从 "master" class 或组件（无论哪个有效）继承所有这些组件，以便能够从需要它们的所有组件调用我的函数。

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

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

我希望你将此功能移动到另一个 file/class/components:

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

然后你可以将这个服务注入任何东西，这真的很有用而且你保持干爽。

你可以像这样简单地注入它：

import {UtilsService} from 'app/shared';

export MyComponent {

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

编辑：

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

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

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

编辑 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';

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

Answer 2

如果你想使用继承，那就是 extends 关键字：

parent.class.ts

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

child.component.ts

import { Component } from "@angular/core";
import { parent } from "./parent.class";

@Component({
  selector: 'child',
  template: `<div>{{myMessage}}</div>`
})
export class child extends parent {
  myMessage: string = "Hello";

  constructor(){
    super.foo(this.myMessage);
  }
}

http://plnkr.co/edit/iQfqphLCx62Qy5lYVJa5?p=preview

请注意，任何修饰信息都会丢失，因此不要将其应用于基础 class 并期望 children 会拥有它。

为了这些目的使用继承就差不多了。共享服务甚至静态 class 的其他方法也是可行的。这实际上取决于您尝试用它们完成什么以及哪种模式最适合您的用例。

Answer 3

您可以创建 class，其中所有方法都是静态的

export class Utils {
    public static log(msg:string){
        console.log(msg);
    }
}

然后，将其导入到您要使用的位置即可

import {Utils} from './utils'

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

class child{
   constructor(){
      Utils.log("Hello");
   }
}

Answer 4

您可以创建包含所有常用函数的utils.ts

export default class Utils {
    static doSomething(val: string) { return val; }
    static doSomethingElse(val: string) { return val; }
}

然后你可以像下面这样使用

import Utils from './utils'

export class MyClass {
     constructor()
     {
         Utils.doSomething("test");
     }
}

Angular 2：要跨所有组件使用的功能

Angular 2: Functions to be used across all components

inheritance

class

typescript

angular2-components

angular