デコレータとは何ですか? Angular でメソッド デコレータを使用する方法について話しましょう?

メソッド デコレータは Angular だけの機能ではありません。この機能は es6 でも利用できます。この記事では主に Angular でのメソッド デコレータの使用方法を紹介します。 [関連チュートリアルの推奨: 「angular チュートリアル」]

デコレーターとは何ですか?

es6 では、デコレーター (Decorator) はクラス (クラス) に関連する構文であり、クラスおよびクラス メソッドに注釈を付けたり変更したりするために使用されます。デコレーターは実際に実行される関数です。コンパイル時に、通常、構文「@関数名」はクラスおよびクラス メソッドの定義の前に配置されます。デコレータには、クラス デコレータとクラス メソッド デコレータの 2 種類があります。

Angular では、最も一般的なデコレータは @Component クラスのデコレータであり、メソッドにデコレータを追加することもできます。

デコレータは関数です。メソッド デコレータを使用すると、メソッドの定義を監視、変更、または置き換えることができ

ます

。このようにして、このカプセル化層を柔軟に使用して、さまざまな処理を行うことができます。

最も一般的なのは検証です。この方法で、メソッドにアクセス許可の検証を追加する必要がある場合、このレイヤーを介してメソッドをカプセル化してオーバーライドする必要があります。検証方法。

あるいは、さまざまなメソッドに対して、統一されたポップアップ ウィンドウやプロンプト処理を実行することができるため、統一された処理のためにメソッド デコレータを追加できます。

全体として、メソッド デコレータの目的は、一部のメソッドの統合ロジックをカプセル化して、各メソッド呼び出し中に必要なときに再利用できるようにすることです。

メソッド デコレータの使用

デコレータには主に 3 つの入力パラメータがあります。

• target: Object - 装飾されたクラスのオブジェクト
• key: string - メソッド名
• descriptor: TypePropertyDescript - プロパティ記述子

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

関数 log(ターゲット: 任意、キー: 文字列、記述子: 任意) {
  コンソール.ログ(ターゲット);
  コンソール.ログ(キー);
  console.log(記述子);
}
@成分（{
  セレクター: 'app-fn-test',
  templateUrl: './fn-test.component.html',
  styleUrls: ['./fn-test.component.scss']
})
エクスポート クラス FnTestComponent は OnInit {を実装します。

  コンストラクター() { }

  ngOnInit(): void {
    this.pay(2,3)
  }
  
  @ログ
  pay(価格:数値、カウント:数値):数値{
      返品価格*個数
  }
}

また、メソッド デコレータは、パラメータを渡すメソッド デコレータとパラメータを渡さないメソッド デコレータの 2 種類に分類できます。

パラメータを渡さずに

、これは装飾されたメソッドです。このメソッドを通じて、渡されたパラメータと関数の実行結果を取得できます。

function log(target: any, key:文字列、記述子: 任意) {
  let メソッド = 記述子.値;
  descriptor.value = function (...args: any[]) {
      var 結果: any = method.apply(this, args);
      console.log(`メソッド：${key}, args：${JSON.stringify(args)}, return：${result}`);
      結果を返します。
  }

パラメータ

、

内側の層によって返される関数はパラメータなしで前の関数と同じです。この関数を使用する場合は、次の 3 つのパラメータを取得できます。

function log(nowTime: Date) {
  console.log(nowTime);
  return function(ターゲット: 任意、キー: 文字列、記述子: 任意){
    let メソッド = 記述子.値;
    descriptor.value = function (...args: any[]) {
        var 結果: any = method.apply(this, args);
        console.log(`メソッド：${key}, args：${JSON.stringify(args)}, return：${result}`);
        結果を返します。
    }
  }
}

エクスポート クラス FnTestComponent は OnInit {を実装します。

  ...    
  @log(新しい日付())
  pay(Price:number, count:number):number { return Price*count
  }
}

// 火曜日 6 月 07 2022 18:48:22 GMT+0800 (中国標準時)
// fn-test.component.ts:9 method: pay, args: [2,3], return: 6

概要

メソッド デコレータを通じて、クラス内のメソッドに対して統合された論理処理を実行できるため、不要な処理を大幅に削減できます。コードの重複により方法が簡素化され、その後の二次開発のコストを大幅に削減することもできます。