Что такое декоратор? Давайте поговорим о том, как использовать декораторы методов в Angular?

Декораторы методов не являются эксклюзивной функцией Angular. Эта функция также доступна в es6. В этой статье в основном рассказывается об использовании декораторов методов в Angular. [Рекомендация по соответствующему руководству: «учебник по angular»]

Что такое декоратор?

В es6 декоратор (декоратор) — это синтаксис, связанный с классом (классом), используемый для аннотирования или изменения классов и методов класса, декоратор на самом деле является выполняемой функцией; во время компиляции синтаксис «@имя функции» обычно помещается перед определением классов и методов класса. Существует два типа декораторов: декораторы классов и декораторы методов класса.

В Angular наиболее распространенным декоратором является декоратор класса @Component, но мы также можем добавлять декораторы к методам:

Декоратор — это функция. Декоратор метода можно использовать для мониторинга, изменения или замены определения метода

Преимущества использования декоратора метода

упомянуты выше. определение метода. Таким образом, мы можем гибко использовать этот уровень инкапсуляции, который позволяет нам делать множество вещей.

Наиболее распространенным из них является проверка. Мы можем инкапсулировать метод через этот уровень для выполнения единой проверки разрешений. Таким образом, если вам нужно добавить проверку разрешений в метод, вам нужно только добавить этот декоратор метода вместо Повтора, чтобы переопределить. метод проверки.

Или это может быть унифицированная обработка всплывающего окна или подсказки. Для многих различных методов унифицированная обработка подсказок может выполняться после выполнения, так что для унифицированной обработки можно добавить декоратор метода.

В целом, цель декораторов методов — инкапсулировать унифицированную логику некоторых методов, чтобы их можно было повторно использовать при необходимости во время каждого вызова метода.

использовать декоратор метода

Декоратор в основном имеет три

• целевых входных параметра: Object — объект декорируемого класса,
• ключ: string —
• дескриптор имени метода: TypePropertyDescript — дескриптор свойства

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

журнал функции (цель: любой, ключ: строка, дескриптор: любой) {
  console.log(цель);
  console.log(ключ);
  console.log(дескриптор);
}
@Компонент({
  селектор: 'app-fn-test',
  templateUrl: './fn-test.comComponent.html',
  styleUrls: ['./fn-test.comComponent.scss']
})
класс экспорта FnTestComponent реализует OnInit {

  конструктор() { }

  ngOnInit(): пустота {
    это.pay(2,3)
  }
  
  @бревно
  pay(Цена: число, количество: число): число {
      Цена возврата*кол-во
  }
}

Оформление метода можно разделить на два типа: один — это декоратор метода, который передает параметры, а другой — декоратор метода, который не передает параметры.

без передачи параметров

, который является декорированным методом. С помощью этого метода мы можем получить переданные параметры и результат выполнения функции:

function log(target: Any, key: строка, дескриптор: любой) {
  пусть метод = descriptor.value;
  descriptor.value = function (...args: Any[]) {
      результат var: любой = метод.apply(this, args);
      console.log(`method:${key}, args:${JSON.stringify(args)}, return:${result}`);
      вернуть результат;
  }
}

Входящие параметры

В этом случае передачи параметров нам нужно обернуть другой слой вне предыдущей функции. Внешняя функция может получить переданное значение, а функция, возвращаемая внутренним слоем, такая же, как и предыдущая, без параметров. Если вы хотите использовать функцию, вы можете получить три параметра:

function log(nowTime: Date) {
  console.log(nowTime);
  функция возврата (цель: любая, ключ: строка, дескриптор: любой) {
    пусть метод = descriptor.value;
    descriptor.value = function (...args: Any[]) {
        результат var: любой = метод.apply(this, args);
        console.log(`method:${key}, args:${JSON.stringify(args)}, return:${result}`);
        вернуть результат;
    }
  }
}

класс экспорта FnTestComponent реализует OnInit {

  ...    
  @log(новая дата())
  pay(Цена: число, количество:число): число { return Цена*количество
  }
}

// Вт, 7 июня 2022 г., 18:48:22 GMT+0800 (стандартное китайское время)
// fn-test.comComponent.ts:9 метод: pay, args: [2,3], return: 6

Резюме

С помощью декораторов методов мы можем выполнять унифицированную логическую обработку методов внутри класса, что может уменьшить количество ненужных действий. дублирование кода также может упростить метод и значительно снизить стоимость последующей вторичной разработки.