角2：すべてのコンポーネントで使用される関数

Question

私は現在いくつかのコンポーネントにわたって繰り返されているいくつかの機能を持つ角度2のWebpackプロジェクトを持っています。私はそれらを必要とするすべてのコンポーネントから自分の関数を呼び出すことができるように、 "マスター"クラスのORコンポーネント（いずれか動作するもの）からこれらのコンポーネントをすべて継承したいと思います。一例として、

、私は3種類のコンポーネントで関数fooを持っている場合：

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

私はあなたが別のファイル/クラス/コンポーネントにこの機能を移動したいと思います：

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

およびHAVING私の与えられたコンポーネントから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(); 
    }); 
    } 
} 

次に、あなたが本当に便利ですし、DRY物事を保つもの、にこのサービスを注入することができます。

あなたは、単にそのようにそれを注入します：

import {UtilsService} from 'app/shared'; 

export MyComponent { 

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

EDIT：@ aalielfekyの答えは言う

として、あなたは静的関数を使用することができます。

しかし、私は静的関数を避けることができます。なぜなら、これらの関数は境界線であり、関数の1つで使用されるコンストラクタに何かを注入する必要があるときに、 。静的関数は注入されたものを使用できないためです。

多くのコードを書き直す必要がありますので、私と同じ間違いをしないでください。

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

飾り情報は失われますので、それを基本クラスに適用せず、子がそれを持つことを期待してください。

これは、これらの目的のために継承を使用した場合とほぼ同じです。共有サービスの他のメソッドや静的クラスさえも実行可能です。実際にあなたがそれらで達成しようとしているものと、あなたのユースケースに最もよく合ったパターンに依存します。あなたはすべての共通つくが含まれているあなたはutils.tsを作成することができます

import {Utils} from './utils' 

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

class child{ 
    constructor(){ 
     Utils.log("Hello"); 
    } 
} 

Answer 3

あなたはすべてのメソッドが

export class Utils { 
    public static log(msg:string){ 
     console.log(msg); 
    } 
} 

その後、静的なクラスを作成することができ、それをインポートし

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

を使用する場所