2018/03/27更新

[フロントエンド] 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でも値の変化を捉えることができます。各要素の詳細は、OnChangesSimpleChangesSimpleChange、の各公式ドキュメントを確認ください。



参考資料

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

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



最後に

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

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

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。