Angular でデコレータを作成してみる

Angular でデコレータを作成してみる

Angular で独自にデコレータを作成してみます。例えばあるイベントハンドラが呼ばれたときにDBに登録する、といったことがデコレータで実現することができます。

が、面倒なのでここではコンソール出力するだけにしておきます。

イベントハンドラ用のデコレータ作成する

Angular ではコンポーネントやサービスはコマンドで作成できるんですが、どうもデコレータを作成するコマンドはなさそうです。(あったら心穏やかな方教えてください)

そもそもデコレータはTypeScriptの機能だからかもしれませんね。

a.tsというファイルに関数を作成します。これがデコレータ定義となります。

a.ts

export function TakahashiDecolator(message:string){
  return (target:any,propertyKey:string,descriptor:PropertyDescriptor)=>{
    const handler = descriptor.value;
    descriptor.value = function() {
      console.log(message + '実行されました');
      const ret = handler.apply(this, arguments);// イベントハンドラを実行する部分
    }
  };
}

詳細な書き方は参考サイトを見てください。このデコレータはstring型の引数を一つ持ち、ログ出力しています。

そのあと、applyメソッドでデコレータをつけたイベントハンドラを実行しています。

これでTakahashiDecolatorというのが使えるようになります。デコレータの先頭には@を付加します。

では、実際使ってみます。ボタンを押すとログ出力されます。

app.component.ts

import { Component } from '@angular/core';
import { TakahashiDecolator } from './a';
@Component({
  selector: 'app-root',
  template:
  `
  <button (click)='onClick()'>ボタン</button>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  a:string = 'あいうえお';
  @TakahashiDecolator('onClickハンドラ')
  onClick(){
    console.log(this.a);
  }
}

今回作成されたデコレータではログ出力してからメソッド実行しているので、ログの順番もその通りになります。

以下実行例です。ログ出力の順番からデコレータが先に実行され、次にイベントハンドラが実行されているのがわかります。

Angular でデコレータを作成してみる

今回はログ出力だけですが、DBに登録するとかも可能です。

デコレータでイベントハンドラの引数を取得する

デコレータをイベントハンドラにつける場合は、イベントハンドラの引数を取得することができます。

applyメソッドの第二引数argumentsは配列で、中身はイベントハンドラの引数を配列で持っています。

arguments[0]とすると、イベントハンドラの第一引数(上記でいうonClick())の第一引数が取得することができます。このメソッドは引数がありませんが追加してみると取得できることが確認できます。

参考サイト

参考サイト

コメント

タイトルとURLをコピーしました