Qu'est-ce qu'un décorateur ? Parlons de la façon d'utiliser les décorateurs de méthodes dans Angular ?

Les décorateurs de méthodes ne sont pas une fonctionnalité exclusive d'Angular. Cette fonctionnalité est également disponible dans es6. Cet article présente principalement l'utilisation des décorateurs de méthodes dans Angular. [Recommandation du didacticiel associé : "tutoriel angulaire"]

Qu'est-ce qu'un décorateur ?

Dans es6, le décorateur (Decorator) est une syntaxe liée à une classe (classe), utilisée pour annoter ou modifier des classes et des méthodes de classe ; lors de la compilation, la syntaxe "@function name" est généralement placée avant la définition des classes et des méthodes de classe. Il existe deux types de décorateurs : les décorateurs de classe et les décorateurs de méthodes de classe.

Dans Angular, le décorateur le plus courant est le décorateur de classe @Component, et nous pouvons également ajouter des décorateurs aux méthodes :

Un décorateur est une fonction. Un décorateur de méthode peut être utilisé pour surveiller, modifier ou remplacer la définition d'une

Les avantages de l'utilisation d'un décorateur de méthode

sont mentionnés ci-dessus. définition d'une méthode. De cette manière, nous pouvons utiliser de manière flexible cette couche d'encapsulation qu'elle nous amène pour faire beaucoup de choses.

La plus courante est la vérification. Nous pouvons encapsuler une méthode via cette couche pour effectuer une vérification d'autorisation unifiée. De cette façon, si vous devez ajouter une vérification d'autorisation à une méthode, il vous suffit d'ajouter ce décorateur de méthode au lieu de Répéter pour remplacer le. méthode de vérification.

Ou il peut s'agir d'une fenêtre contextuelle unifiée ou d'un traitement d'invite. Pour de nombreuses méthodes différentes, un traitement d'invite unifié peut être effectué après l'exécution, de sorte qu'un décorateur de méthode puisse être ajouté pour un traitement unifié.

Dans l’ensemble, le but des décorateurs de méthodes est d’encapsuler la logique unifiée de certaines méthodes afin qu’elles puissent être réutilisées en cas de besoin lors de chaque appel de méthode.

utiliser la méthode décorateur

Le décorateur a principalement trois paramètres d'entrée

• target : Object - l'objet de la classe décorée
• key : string -
• descripteur de nom de méthode : TypePropertyDescript - descripteur de propriété

import { Component, OnInit } from '@angular/core' ;

log de fonction (cible : n'importe laquelle, clé : chaîne, descripteur : n'importe laquelle) {
  console.log(cible);
  console.log(clé);
  console.log(descripteur);
}
@Composant({
  sélecteur : 'app-fn-test',
  templateUrl : './fn-test.component.html',
  styleUrls : ['./fn-test.component.scss']
})
la classe d'exportation FnTestComponent implémente OnInit {

  constructeur() { }

  ngOnInit() : vide {
    ceci.pay(2,3)
  }
  
  @enregistrer
  payer (Prix : numéro, nombre : numéro ): numéro {
      retour Prix*nombre
  }
}

Et la décoration de méthode peut être subdivisée en deux types, l'un est le décorateur de méthode qui transmet des paramètres, et l'autre est le décorateur de méthode qui ne transmet pas de paramètres.

sans passer de paramètres

, qui est la méthode décorée, grâce à cette méthode, nous pouvons obtenir les paramètres passés et le résultat de l'exécution de la fonction :

function log(target: any, key: chaîne, descripteur : n'importe lequel) {
  let méthode = descripteur.valeur ;
  descriptor.value = fonction (...args : any[]) {
      résultat var : any = method.apply(this, args);
      console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
      renvoyer le résultat ;
  }
}

Paramètres entrants

Dans ce cas de transmission de paramètres, nous devons envelopper une autre couche en dehors de la fonction précédente. La fonction externe peut obtenir la valeur transmise, et la fonction renvoyée par la couche interne est la même que la précédente sans paramètres. Si vous souhaitez utiliser la fonction, vous pouvez obtenir trois paramètres :

function log(nowTime: Date) {
  console.log(nowTime);
  fonction de retour (cible : n'importe laquelle, clé : chaîne, descripteur : n'importe laquelle){
    let méthode = descripteur.valeur ;
    descriptor.value = fonction (...args : any[]) {
        résultat var : any = method.apply(this, args);
        console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
        renvoyer le résultat ;
    }
  }
}

la classe d'exportation FnTestComponent implémente OnInit {

  ...    
  @log(nouvelle date())
  payer (Prix : nombre, nombre : nombre) : nombre { retourner Prix*compte
  }
}

// Mar 7 juin 2022 18:48:22 GMT+0800 (heure standard de Chine)
// fn-test.component.ts:9 méthode : pay, args : [2,3], return : 6

Résumé

Grâce aux décorateurs de méthodes, nous pouvons effectuer un traitement logique unifié sur les méthodes à l'intérieur de la classe, ce qui peut réduire beaucoup d'inutiles la duplication du code peut également simplifier la méthode et réduire considérablement le coût du développement secondaire ultérieur.