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

Question

У меня есть проект веб-пакета с угловым 2, в котором у меня есть некоторые функции, которые повторяются на нескольких компонентах. Я хотел бы наследовать все эти компоненты из компонента «master» класса OR (в зависимости от того, что работает), чтобы иметь возможность вызывать мои функции из всех моих компонентов, которые в них нуждаются.

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

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

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

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

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

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

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

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

Затем вы можете вводить эту услугу во что-либо, что является очень полезным, и вы держать вещи DRY.

Вы бы просто вводить его следующим образом:

import {UtilsService} from 'app/shared'; 

export MyComponent { 

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

EDIT:

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

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

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

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

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

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

Answer 3

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

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, который содержит все общие Funcitons

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

Тогда вы можете использовать ниже: