¿Qué es un decorador? ¿Hablemos de cómo usar decoradores de métodos en Angular?

Los decoradores de métodos no son una característica exclusiva de Angular. Esta característica también está disponible en es6. Este artículo presenta principalmente el uso de decoradores de métodos en Angular. [Recomendación del tutorial relacionado: "tutorial angular"]

¿Qué es un decorador?

En es6, el decorador (Decorator) es una sintaxis relacionada con una clase (clase), que se utiliza para anotar o modificar clases y métodos de clase. Durante la compilación, la sintaxis "@nombre de función" generalmente se coloca antes de la definición de clases y métodos de clase. Hay dos tipos de decoradores: decoradores de clases y decoradores de métodos de clases.

En Angular, el decorador más común es el decorador de clase @Component, y también podemos agregar decoradores a los métodos:

Un decorador es una función. Un decorador de métodos se puede usar para monitorear, modificar o reemplazar la definición de un

Las ventajas de usar un decorador de

métodos se pueden usar para monitorear, modificar o reemplazar. Definición de un método De esta manera, podemos usar de manera flexible esta capa de encapsulación que nos brinda para hacer muchas cosas.

El más común es la verificación. Podemos encapsular un método a través de esta capa para realizar una verificación de permisos unificada. De esta manera, si necesita agregar verificación de permisos a un método, solo necesita agregar este decorador de métodos en lugar de Repetir para anularlo. método de verificación.

O puede ser una ventana emergente unificada o un procesamiento de mensajes. Para muchos métodos diferentes, el procesamiento de mensajes unificados se puede realizar después de la ejecución, de modo que se pueda agregar un decorador de métodos para el procesamiento unificado.

Con todo, el propósito de los decoradores de métodos es encapsular la lógica unificada de algunos métodos para que puedan reutilizarse cuando sea necesario durante cada llamada a un método.

utilizar el método decorador

El decorador tiene principalmente tres parámetros de entrada

• objetivo: Objeto - el objeto de la clase decorada
• clave: cadena -
• descriptor del nombre del método: TypePropertyDescript - descriptor de propiedad

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

registro de función (objetivo: cualquiera, clave: cadena, descriptor: cualquiera) {
  console.log(destino);
  consola.log(clave);
  consola.log(descriptor);
}
@Componente({
  selector: 'aplicación-fn-prueba',
  URL de plantilla: './fn-test.component.html',
  URL de estilo: ['./fn-test.component.scss']
})
clase de exportación FnTestComponent implementa OnInit {

  constructor() { }

  ngOnInit(): nulo {
    esto.pagar(2,3)
  }
  
  @registro
  pagar(Precio: número, recuento:número): número {
      volver Precio*recuento
  }
}

Y la decoración de métodos se puede subdividir en dos tipos, uno es el decorador de métodos que pasa parámetros y el otro es el decorador de métodos que no pasa parámetros.

sin pasar parámetros

, que es el método decorado. A través de este método, podemos obtener los parámetros pasados ​​y el resultado de la ejecución de la función:

función log(destino: cualquiera, clave: cadena, descriptor: cualquiera) {
  let método = descriptor.valor;
  descriptor.valor = función (...argumentos: cualquiera[]) {
      resultado de var: cualquiera = método.apply(this, args);
      console.log(`método:${clave}, args:${JSON.stringify(args)}, retorno:${resultado}`);
      resultado de devolución;
  }
}

Parámetros entrantes

En este caso de pasar parámetros, necesitamos envolver otra capa fuera de la función anterior. La función externa puede obtener el valor pasado y la función devuelta por la capa interna es la misma que la anterior sin parámetros. Si desea utilizar la función, puede obtener tres parámetros:

function log(nowTime: Date) {
  console.log(horahora);
  función de retorno (destino: cualquiera, clave: cadena, descriptor: cualquiera) {
    let método = descriptor.valor;
    descriptor.valor = función (...argumentos: cualquiera[]) {
        resultado de var: cualquiera = método.apply(this, args);
        console.log(`método:${clave}, args:${JSON.stringify(args)}, retorno:${resultado}`);
        resultado de devolución;
    }
  }
}

clase de exportación FnTestComponent implementa OnInit {

  ...    
  @log(nueva fecha())
  pagar(Precio: número, recuento:número): número { devolver Precio*recuento
  }
}

// martes 7 de junio de 2022 18:48:22 GMT+0800 (hora estándar de China)
// fn-test.component.ts:9 método: pago, argumentos: [2,3], retorno: 6

Resumen

A través de decoradores de métodos, podemos realizar un procesamiento lógico unificado en métodos dentro de la clase, lo que puede reducir muchos innecesarios La duplicación de código también puede simplificar el método y reducir en gran medida el costo del desarrollo secundario posterior.