What is a decorator? Let’s talk about how to use method decorators in Angular?

Method decorators are not an exclusive feature of Angular. This feature is also available in es6. This article mainly introduces the use of method decorators in Angular. [Related tutorial recommendation: "angular tutorial"]

What is a decorator?

In es6, decorator (Decorator) is a syntax related to a class (class), used to annotate or modify classes and class methods; the decorator is actually a Functions executed during compilation, the syntax "@function name" is usually placed before the definition of classes and class methods. There are two types of decorators: class decorators and class method decorators.

In Angular, the most common decorator is the @Component class decorator, and we can also add decorators to methods:

A decorator is a function. A method decorator can be used to monitor, modify, or replace the definition of a

The advantages of using a method decorator

are mentioned above. A method decorator can be used to monitor, modify, or replace the definition of a method. In this way, we can flexibly use this layer of encapsulation it brings us to do many things.

The most common one is verification. We can encapsulate a method through this layer to perform unified permission verification. In this way, if you need to add permission verification to a method, you only need to add this method decorator instead of Repeat to override the verification method.

Or it can be unified pop-up window or prompt processing. For many different methods, unified prompt processing may be performed after execution, so that a method decorator can be added for unified processing.

All in all, the purpose of method decorators is to encapsulate the unified logic of some methods so that they can be reused when needed during each method call.

to use the method decorator

The decorator mainly has three input parameters

• target: Object - the object of the decorated class
• key: string - method name
• descriptor: TypePropertyDescript - property descriptor

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

function log(target: any, key: string, descriptor: any) {
  console.log(target);
  console.log(key);
  console.log(descriptor);
}
@Component({
  selector: 'app-fn-test',
  templateUrl: './fn-test.component.html',
  styleUrls: ['./fn-test.component.scss']
})
export class FnTestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.pay(2,3)
  }
  
  @log
  pay(Price: number, count:number): number {
      return Price*count
  }
}

And method decoration can be subdivided into two types, one is the method decorator that passes in parameters, and the other is the method decorator that does not pass in parameters.

without passing in parameters

, which is the decorated method. Through this method, we can get the passed in parameters and the execution result of the function:

function log(target: any, key: string, descriptor: any) {
  let method = descriptor.value;
  descriptor.value = function (...args: any[]) {
      var result: any = method.apply(this, args);
      console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
      return result;
  }
}

Incoming parameters

In this case of passing in parameters, we need to wrap another layer outside the previous function. The outer function can get the passed in value, and the function returned by the inner layer is the same as the previous one without parameters. If you want to use the function, you can get three parameters:

function log(nowTime: Date) {
  console.log(nowTime);
  return function(target: any, key: string, descriptor: any){
    let method = descriptor.value;
    descriptor.value = function (...args: any[]) {
        var result: any = method.apply(this, args);
        console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
        return result;
    }
  }
}

export class FnTestComponent implements OnInit {

  ...    
  @log(new Date())
  pay(Price: number, count:number): number { return Price*count
  }
}

// Tue Jun 07 2022 18:48:22 GMT+0800 (China Standard Time)
// fn-test.component.ts:9 method: pay, args: [2,3], return: 6

Summary

Through method decorators, we can perform unified logical processing on methods inside the class, which can reduce a lot of Unnecessary duplication of code can also make the method simpler and greatly reduce the cost of subsequent secondary development.