Question

我有一个有角度的2 webpack项目，我目前在一些组件中重复了一些功能。我想从一个＆＃34; master＆＃34;继承所有这些组件。 class OR组件（无论哪个有效），以便能够从我需要它们的所有组件中调用我的函数。

例如，如果我在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()

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的回答所说，你可以使用静态函数。

但是，我个人会避免使用静态函数，因为它们无法正确测试，并且一旦到了需要在构造函数中注入某些函数的地方，就会给你一个地狱。由于静态函数不能使用任何注入的东西。

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

Answer 2

您可以创建所有方法都是静态的类

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 3

您可以创建包含所有常用功能的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");
     }
}

Answer 4

如果您想使用继承，那就是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

请注意，任何装饰信息都会丢失，因此请不要将其应用于基类，并期望孩子们拥有它。

这就是为了这些目的而使用继承。共享服务甚至静态类的其他方法也是可行的。这实际上取决于你想要用它们完成什么，以及哪种模式最适合你的用例。

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

4 个答案: