Typescript décorateurs personnalisés : contexte de this

Question

Je crée un décorateur personnalisé qui exécutera des fonctions décorées sur des événements RxJS.

Jusque-là tout va bien : mon problème survient lorsque la fonction est effectivement exécutée : le contexte de l'objet this est perdu.

J'ai cherché une solution pendant la dernière journée mais je n'arrive pas à la trouver.

Voici un stackblitz reproduisant le problème. L'objectif est de voir Angular dans la console, provenant de this.name.

Answer 1

Je vois que vous essayez d'appeler une méthode sur l'instance de la classe décorée dans votre décorateur. Cependant, les décorateurs de classe ne fonctionnent pas de cette manière. Ils sont appelés lorsque la classe est définie, pas lorsqu'elle est instanciée, donc vous ne pouvez rien appeler avec les instances de votre classe.

Voici votre stackblitz mis à jour. Je suis en train d'étendre votre classe et d'appeler la méthode dans le constructeur de la classe étendue, de sorte qu'elle soit appelée chaque fois que des objets de la classe décorée sont instanciés.

Answer 2

Veuillez essayer le code ci-dessous, cela fonctionnera. Ici, vous devez seulement changer cela en constructeur.

function HelloWorld(): ClassDecorator {
  return function(constructor) {
    constructor.prototype.HelloWorld.apply(new constructor(), null);
  };
}

Answer 3

En https://netbasal.com/inspiration-for-custom-decorators-in-angular-95aeb87f072c il n'y a pas de

constructor.prototype.HelloWord.apply(this, null);

il suffit de commenter la ligne pour que votre application fonctionne

le cosntructor.prototype est utilisé pour pouvoir utiliser ngOnInit, ngOnChanges...

par exemple, l'affichage sur la page est

import { environment } from "../environments/environment";
export function NgLog() : ClassDecorator {
  return function ( constructor : any ) {
    if( !environment.production ) {
      // Vous pouvez ajouter/supprimer des événements selon vos besoins
      const LIFECYCLE_HOOKS = [
        'ngOnInit',
        'ngOnChanges',
        'ngOnDestroy'
      ];
      const component = constructor.name;

      LIFECYCLE_HOOKS.forEach(hook => {
        const original = constructor.prototype[hook];

        constructor.prototype[hook] = function ( ...args ) {
          console.log(`%c ${component} - ${hook}`, `color: #4CAF50; font-weight: bold`, ...args);
          original && original.apply(this, args);
        }
      });
    }

  }
}