web-dev-qa-db-ja.com

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

angular 2 webpackプロジェクトがあり、現在いくつかのコンポーネントで繰り返されるいくつかの機能があります。これらのすべてのコンポーネントを「マスター」クラスから継承したいと思います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を使用してこれを行うにはどうすればよいですか？

classinheritanceangulartypescriptangular2-components
13
Vanquiza

私はサービスを使用します。これは私のアプリの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の答えが示すように、静的関数を使用できます。

ただし、静的関数は、適切にテストすることは不可能であり、関数の1つで使用されるコンストラクターに何かを挿入する必要が生じると、地獄を与えるので、静的関数は避けたいと思います。静的関数は注入されたものを使用できないため。

あなたは多くのコードを書き直さなければならないので、私と同じ間違いをしないでください。

37
Chrillewoodz

すべてのメソッドが静的であるクラスを作成できます

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

継承を使用する場合は、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

デコレーション情報は失われるため、基本クラスに適用しないでください。また、子が持っていることを期待してください。

これらの目的で継承を使用するのは、ほぼこれで終わりです。共有サービスの他のメソッド、さらには静的クラスも実行可能です。それは本当にあなたがそれらで何を達成しようとしているのか、そしてどのパターンがあなたのユースケースに最もマッチするかに依存します。

3
silentsod

すべての共通機能を含む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");
     }
}
3
venkat7668