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

Angular でデコレータを作成してみる
1. 関連

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);
  }
}

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

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