Ionic 4 で routerLink を使用して遷移する際、iOSでガタガタするときの解決法

前提

Angularベースの Ionic4 を使用してiOSアプリを構築していたとき、
RouterLinkを使用してページへ移動すると途中でアニメーションがガタっとなるという動作の不具合が出ました。

ガタっとなるというのを丁寧に説明すると、routerDirection="forward"で遷移する際、
iOSの場合、右側からページが出てくるようなアニメーションになると思いますが、
ページが右側から出てくる途中で一瞬止まって、次の瞬間にページが表示されるような挙動です。

解決方法を探して本家のこちらのページ ([ionic-team/ionic] Animation on page transition on iOS is broken #17649 - Github ) に行き着いたのですが、
iOSの問題ということで処理されいたので、仕方なく自己解決しました。

バージョン

node	v12.8.0
@ionic/angular	4.9.0
@angular/router	8.1.3

問題が起こっていた状況

親ページ

    <ion-card *ngFor="let book of books" [routerLink]="['/main/child/', book.id]" >

        <!-- 省略 -->

    </ion-card>

子ページ

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/main" text=""></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ng-container *ngIf="observable$ | async as data">
  <ion-content>

        <!-- 省略 -->

  </ion-content>
</ng-container>

こんな状態で、親ページから子ページにrouterLinkにより遷移する際にガタついていました。

解決方法

いろいろ調べた結果、私の環境における問題は ion-content が 初期表示の段階で存在していないこと でした。
なので、ng-container を ion-content の内側に持ってくると解決しました。

子ページ解決後

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/main" text=""></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content> <!-- ここを変更しました -->
  <ng-container *ngIf="observable$ | async as data">

        <!-- 省略 -->

  </ng-container>
</ion-content>

*ngIf="observable$ | async as data"のように、if条件により後から表示する場合だけでなく、
そもそもページ上に ion-contentが存在しない場合も同様にガタつくようです。
お気をつけくださいませ。

※こちらはあくまでも私の環境での解決方法なので、もしかすると、別の原因で同様の現象が起こっている方もおられるかもしれません。参考までにご覧ください。