O que é um decorador? Vamos falar sobre como usar decoradores de métodos no Angular?

Os decoradores de métodos não são um recurso exclusivo do Angular. Este recurso também está disponível no es6. Este artigo apresenta principalmente o uso de decoradores de métodos no Angular. [Recomendação de tutorial relacionado: "tutorial angular"]

O que é um decorador?

No es6, decorador (Decorator) é uma sintaxe relacionada a uma classe (classe), usada para anotar ou modificar classes e métodos de classe, o decorador é na verdade uma função executada; durante a compilação, a sintaxe "@nome da função" geralmente é colocada antes da definição de classes e métodos de classe. Existem dois tipos de decoradores: decoradores de classe e decoradores de método de classe.

Em Angular, o decorador mais comum é o decorador da classe @Component, e também podemos adicionar decoradores aos métodos:

modificar

ou substituir a definição de um

método

definição de um método Dessa forma, podemos usar com flexibilidade essa camada de encapsulamento que nos leva a fazer muitas coisas.

O mais comum é a verificação. Podemos encapsular um método através desta camada para realizar a verificação unificada de permissão. Dessa forma, se você precisar adicionar verificação de permissão a um método, basta adicionar este decorador de método em vez de Repetir para substituir o método. método de verificação.

Ou pode ser uma janela pop-up unificada ou processamento de prompt. Para muitos métodos diferentes, o processamento de prompt unificado pode ser executado após a execução, para que um decorador de método possa ser adicionado para processamento unificado.

Resumindo, o objetivo dos decoradores de métodos é encapsular a lógica unificada de alguns métodos para que possam ser reutilizados quando necessário durante cada chamada de método.

usar o método decorador

O decorador possui principalmente três parâmetros de entrada

• alvo: Object - o objeto da classe decorada
• chave: string - nome do método
• descritor: TypePropertyDescript - descritor de propriedade

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

function log(destino: qualquer, chave: string, descritor: qualquer) {
  console.log(destino);
  console.log(chave);
  console.log(descritor);
}
@Componente({
  seletor: 'app-fn-test',
  templateUrl: './fn-test.component.html',
  styleUrls: ['./fn-test.component.scss']
})
classe de exportação FnTestComponent implementa OnInit {

  construtor() { }

  ngOnInit(): void {
    isto.pagar(2,3)
  }
  
  @registro
  pagar(Preço: número, contagem:número): número {
      preço de retorno*contagem
  }
}

E a decoração de métodos pode ser subdividida em dois tipos, um é o decorador de métodos que passa parâmetros e o outro é o decorador de métodos que não passa parâmetros.

sem passar parâmetros

, que é o método decorado. Através deste método, podemos obter os parâmetros passados ​​​​e o resultado da execução da função:

function log(target: any, key: string, descritor: qualquer) {
  deixe método = descritor.valor;
  descritor.valor = função (...args: qualquer[]) {
      var resultado: qualquer = método.apply(this, args);
      console.log(`método：${chave}, args：${JSON.stringify(args)}, return：${resultado}`);
      resultado de retorno;
  }
}

Parâmetros recebidos

Neste caso de passagem de parâmetros, precisamos envolver outra camada fora da função anterior. A função externa pode obter o valor passado, e a função retornada pela camada interna é a mesma que a anterior sem parâmetros. Se quiser usar a função, você pode obter três parâmetros:

function log(nowTime: Date) {
  console.log(agoraHora);
  função de retorno(destino: qualquer, chave: string, descritor: qualquer){
    deixe método = descritor.valor;
    descritor.valor = função (...args: qualquer[]) {
        var resultado: qualquer = método.apply(this, args);
        console.log(`método：${chave}, args：${JSON.stringify(args)}, return：${resultado}`);
        resultado de retorno;
    }
  }
}

classe de exportação FnTestComponent implementa OnInit {

  ...    
  @log(nova data())
  pagar(Preço: número, contagem:número): número { return Preço*contagem
  }
}

// Terça-feira, 07 de junho de 2022 18:48:22 GMT+0800 (horário padrão da China)
//fn-test.component.ts:9 método: pay, args: [2,3], return: 6

Resumo

Por meio de decoradores de métodos, podemos realizar processamento lógico unificado em métodos dentro da classe, o que pode reduzir muitos custos desnecessários a duplicação de código também pode tornar o método mais simples e reduzir bastante o custo do desenvolvimento secundário subsequente.