Cómo crear y usar decoradores personalizados en Angular
Los decoradores personalizados en Angular permiten agregar metadatos y funcionalidades a clases, propiedades o métodos de manera dinámica. Aunque Angular ya ofrece decoradores predefinidos como @Component, @Injectable y @Directive, es posible crear nuestros propios decoradores para aplicar lógica adicional, validaciones o incluso para modificar el comportamiento de clases y métodos según nuestras necesidades.
¿Qué son los decoradores personalizados en Angular y cómo se usan?
Un decorador personalizado es una función que envuelve una clase, propiedad o método, y permite agregar metadatos o ejecutar lógica cuando se evalúa dicho elemento. Los decoradores se definen como funciones en TypeScript y se aplican utilizando la sintaxis @NombreDecorador.
Angular usa cuatro tipos principales de decoradores:
1. Decoradores de clase: Modifican el comportamiento de una clase (@Component, @Injectable).
2. Decoradores de propiedad: Se aplican a propiedades dentro de una clase.
3. Decoradores de método: Modifican la funcionalidad de un método.
4. Decoradores de parámetros: Afectan a los parámetros de un método o constructor.
Ejemplo de un decorador personalizado en Angular
1. Crear un decorador de método (log-method.decorator.ts):
export function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const originalMethod = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Método ${propertyKey} invocado con argumentos: ${JSON.stringify(args)}`);
return originalMethod.apply(this, args);
};
return descriptor;
}
En este ejemplo, LogMethod es un decorador de método que registra en la consola cada vez que el método decorado es llamado.
2. Aplicar el decorador a un método de clase (app.component.ts):
import { Component } from '@angular/core';
import { LogMethod } from './log-method.decorator';
@Component({
selector: 'app-root',
template: `<button (click)="realizarAccion('Hola')">Ejecutar Acción</button>`
})
export class AppComponent {
@LogMethod
realizarAccion(mensaje: string) {
console.log(`Acción realizada con mensaje: ${mensaje}`);
}
}
Aquí, el decorador @LogMethod se aplica al método realizarAccion, que muestra un registro de los argumentos recibidos cada vez que el botón se hace clic.
Ejemplos adicionales de decoradores personalizados
1. Decorador de clase para agregar metadatos:
function Metadata(metadataValue: string) {
return function (constructor: Function) {
constructor.prototype.metadata = metadataValue;
};
}
Este decorador agrega una propiedad metadata a la clase en la que se aplica.
2. Decorador de propiedad para validación:
function MinLength(minLength: number) {
return function (target: any, key: string) {
let value = target[key];
const getter = () => value;
const setter = (newVal: string) => {
if (newVal.length < minLength) {
console.log(`La longitud mínima para ${key} es de ${minLength} caracteres.`);
} else {
value = newVal;
}
};
Object.defineProperty(target, key, {
get: getter,
set: setter,
enumerable: true,
configurable: true,
});
};
}Este decorador se usa para establecer una longitud mínima en las propiedades de cadena de texto.
Referencia oficial
Para más detalles, consulta la documentación oficial de Angular sobre decoradores.
Jorge García
Fullstack developer