我有一个有角度的2 webpack项目,我目前有一些功能在几个组件中重复.我想从“master”类OR组件(无论哪种方法)继承所有这些组件,以便能够从我需要它们的所有组件中调用我的函数.
举个例子,如果我在3个不同的组件中有一个函数foo:
foo(s: string){ console.log(s); }
class parent{ foo(s: string){ console.log(s); } }
class child{ constructor(){ foo("Hello"); } }
我如何使用Angular 2 / Typescript做到这一点?
我会使用一个服务,这是我的一个应用程序的缩短示例:
import {Injectable} from '@angular/core'; import * as _ from 'lodash'; @Injectable() 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的回答所说,你可以使用静态函数.
但是,我个人会避免使用静态函数,因为它们无法正常测试,并且一旦到了需要在构造函数中注入某些函数的地方,就会给你一个地狱.由于静态函数不能使用注入的任何东西.