[フロントエンド] Angular2+で@Inputの値が変わった場合に検知する

こんにちは、@yoheiMuneです。
ちょっとマニアックなネタですが、@Inputで受け取る値が変化した時に、それに気づくための実装方法をブログに書きたいと思います。

目次

何がしたいのか

例えば以下のような@Inputで値を受け取るコンポーネントがあったとします。

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

@Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: [ './sidebar.component.scss' ]
})
export class SidebarComponent {

    @Input() visible: boolean;
}

ここでvisibleの値が変わった場合に独自に処理を挟み込みたい、という話です。

変化を把握する方法は2つ

値の変化を捉える方法は、2つ存在します。どちらか都合の良い実装を使うと良いかなと思います。

セッターを使う

@Inputをセッターとして定義することで、値が設定された時の処理を記述できます。以下のように実装します。

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

@Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: [ './sidebar.component.scss' ]
})
export class SidebarComponent {

    private _visible: boolean;

    // セッターとして定義することで、
    // 値が指定された場合に任意の処理を行うことができる.
    @Input() set visible(value: boolean) {
        this._visible = value;
    }
}

この方法はシンプルでわかりやすいので、おすすめです。

ngOnChangesを利用する

ngOnChangesを利用することでも、値の変化を捕捉できます。少し実装量が多いですが、以下のように記述します。

// OnChanges と SimpleChanges を追加.
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: [ './sidebar.component.scss' ]
})
export class SidebarComponent implements OnChanges {  // インターフェースの実装を追加.

    @Input() visible: boolean;

    // 値が変化したときに呼び出されるライフサイクルメソッド.
    ngOnChanges(changes: SimpleChanges) {
      // @Inputが複数ある場合には、どの値の変化でもこのメソッドが呼ばれるので、
      // 処理が必要なものだけに絞る（ここではvisibleに絞る）
      if (changes.visible) {
          console.log('visible is changed.')
          console.log('previous=', changes.visible.previousValue)  // 変化前
          console.log('current=', changes.visible.currentValue)    // 変化後
          console.log('isFirst=', changes.visible.firstChange)     // 初めての値の設定か？
      }
    }
}

記述量が増えて少し煩雑ですが、ngOnChangesでも値の変化を捉えることができます。各要素の詳細は、OnChanges、SimpleChanges、SimpleChange、の各公式ドキュメントを確認ください。

参考資料

今回の実装を学ぶのに、以下のやりとりを参考にしました。ありがとうございます。

angular2 changedetection - How to detect when an @Input() value changes in Angular? - Stack Overflow

最後に

Angularは調べると色々なことが学べて楽しいですね。絶賛利用しているので今後もバシバシとブログに書きたいと思います。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！