web-dev-qa-db-fra.com

Angular 2: Fonctions à utiliser sur tous les composants

J'ai un angular 2 webpack où j'ai actuellement quelques fonctions qui sont répétées dans plusieurs composants. Je voudrais hériter tous ces composants d'une classe "master" OR (selon celui qui fonctionne), afin de pouvoir appeler mes fonctions depuis tous mes composants qui en ont besoin.

Par exemple, si j'ai une fonction foo dans 3 composants différents:

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

J'aimerais que vous déplaciez cette fonction dans un autre fichier/classe/composants:

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

Et avoir en quelque sorte à appeler ma fonction foo depuis un composant donné. Par exemple:

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

Comment pourrais-je faire cela en utilisant Angular 2/Typescript?

classinheritanceangulartypescriptangular2-components
13
Vanquiza

J'utiliserais un service, voici un exemple abrégé d'une de mes applications:

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

Ensuite, vous pouvez injecter ce service dans n'importe quoi, ce qui est vraiment utile et vous gardez les choses au SEC.

Vous l'injecteriez simplement comme ceci:

import {UtilsService} from 'app/shared';

export MyComponent {

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

MODIFIER:

Comme le dit @ aalielfeky, vous pouvez utiliser des fonctions statiques.

Cependant, j'éviterais personnellement les fonctions statiques car elles sont à la limite impossibles à tester correctement et vous donneront un enfer une fois que le moment viendra où vous devrez injecter quelque chose dans le constructeur qui va être utilisé dans l'une des fonctions. Puisque les fonctions statiques ne peuvent pas utiliser tout ce qui est injecté.

Ne faites pas la même erreur que moi car vous finirez par avoir à réécrire beaucoup de code.

37
Chrillewoodz

Vous pouvez créer une classe dont toutes les méthodes sont statiques

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

puis importez-le où vous voulez utiliser

import {Utils} from './utils'

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

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

Si vous souhaitez utiliser l'héritage, c'est le mot clé 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

Notez que toutes les informations de décoration sont perdues, alors ne les appliquez pas à la classe de base et attendez-vous à ce que les enfants les aient.

C'est à peu près tout pour utiliser l'héritage à ces fins. Les autres méthodes d'un service partagé ou même d'une classe statique sont également viables. Cela dépend vraiment de ce que vous essayez d'accomplir avec eux et du modèle qui correspond le mieux à votre cas d'utilisation.

3
silentsod

Vous pouvez créer utils.ts Qui contient toutes les fonctions courantes

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

Ensuite, vous pouvez utiliser comme ci-dessous

import Utils from './utils'

export class MyClass {
     constructor()
     {
         Utils.doSomething("test");
     }
}
3
venkat7668