🌀

Ionic/AngularでライフサイクルをimplementsしてTypoを防ごう

1 min read

この記事はIonic Framework / Capacitor Advent Calendar 2020の記事です。


Ionic/Angularの「なぜか動かない」の原因で、よく「ライフサイクルをtypoしてた」というのがありまます。Ionicでは、Push遷移やPop遷移でのイベント発火をサポートするために、以下の独自のライフサイクルを用意しています。

Event Name Description
ionViewWillEnter コンポーネントが表示されるアニメーションがはじまる時に発火します。
ionViewDidEnter コンポーネントが表示されるアニメーションが終了した時に発火します。
ionViewWillLeave コンポーネントを離脱するアニメーションがはじまる時に発火します。
ionViewDidLeave コンポーネントを離脱するアニメーションが終了した時に発火します。

これらは、 ngOnInitngOnDestroy 同様に、ページコンポーネント内に同名のメソッドを配置すると発火します。しかし、同名でないといけないため IonViewWillEnter() (※1文字目が大文字) としてしまうと、発火しません。一見問題なくみえるために、なかなか原因に気づかなかったりして・・・。

そういうことを防止するために、Ionic/AngularではClassにimplementsするための interface を用意しています。Angularで implements OnInit とするように、利用するライフサイクルを implements しましょう。

import { ViewDidEnter, ViewWillEnter, ViewDidLeave, ViewWillLeave } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements ViewDidEnter, ViewWillEnter, ViewWillLeave, ViewDidLeave {
  ionViewDidEnter() {}
  ionViewWillEnter() {}
  ionViewWillLeave() {}
  ionViewDidLeave() {}

(※上記のようにすべて implements する必要はありません。必要なものだけ追加しましょう)

こうするだけで、Classは上記メソッドが利用されることを認識しますので、追加しわすれたり、Typoしてたりするとコンパイラが教えてくれます。

Typoミスをなくして、よりいい開発ライフを送りましょう!
それでは、また。

この記事に贈られたバッジ

Discussion

ログインするとコメントできます