Angular 2: функции, которые будут использоваться во всех компонентах

у меня есть проект angular 2 webpack, где в настоящее время у меня есть некоторые функции, которые повторяются на протяжении нескольких компонентов. Я хотел бы наследовать все эти компоненты из "мастер-класса" или компонента (в зависимости от того, что работает), чтобы иметь возможность вызывать мои функции из всех моих компонентов, которые в них нуждаются.

в качестве примера, если у меня есть функция foo в 3 разных компонентах:

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

Я хотел бы перенести эту функцию в другую файл/класс/компоненты:

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

и как-то вызвать мою функцию foo из моего данного компонента. Например:

class child{
  constructor(){
    foo("Hello");
  }
}

как бы я это сделал, используя Angular 2 / Typescript?

7
angular angular2-components class inheritance typescript

4 ответов

Я бы использовал сервис, вот сокращенный пример из одного из моих приложений:

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
  }
}

EDIT:

как ответ @aalielfeky говорит, что вы можете использовать статические функции.

тем не менее, я бы лично избегал статических функций, потому что они граничат с невозможностью проверьте правильно, а также дать вам ад, как только придет время, когда вам нужно ввести что-то в конструкторе, который будет использоваться в одной из функций. Поскольку статические функции не могут использовать ничего, что вводится.

Не делайте ту же ошибку, что и я, потому что вам придется переписать много кода.

25

Вы можете создать класс в котором все методы статические

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");
   }
}
13

Если вы хотите использовать наследование это extends ключевые слова:

родитель.класс.ТС

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

ребенок.деталь.ТС

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

обратите внимание, что любая информация decorate теряется, поэтому не применяйте ее к базовому классу и ожидайте, что у детей она будет.

это в значительной степени для использования наследования для этих целей. Другие методы общей службы или даже статического класса также жизнеспособны. Это действительно зависит от того, что вы пытаетесь сделать с ними и какой шаблон лучше всего соответствует вашему случаю использования.

2

вы можете создать 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");
     }
}
1