我有一个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/typecript？
我将使用服务，这是我的一个应用程序中的一个缩短示例：
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';
这种方法的一件好处是，它很容易摇晃，并且与使用服务相比，它的单位测试也稍微容易一些，因为您不需要在测试中添加额外的代码即可使服务能够使服务工作。
您可以创建所有方法均为静态
的类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");
}
}
如果要使用继承，则是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
请注意，任何装饰信息都会丢失，因此请勿将其应用于基类，并期望孩子们拥有它。
将继承用于这些目的几乎是它。共享服务甚至静态类的其他方法也是可行的。这实际上取决于您要使用它们的方法以及最适合您的用例的模式。
您可以创建包含所有常见funcitons
的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");
}
}