[ionic] ion-contentがうまく動かない場合の確認点

ion-contentを使っているページで、どうしても表示が意図通りにならず、
色々と苦戦した結果、思わぬミスをしていることになかなか気づきませんでした。
個人的には、不用意にdivを使わず、ng-containerを使う方が良い、と反省しました。

バージョン等

• Ionic 6.15.0
• Angular: 10.0.14

私的な結論

• ion-contentの上位にdiv を使わない。*ngIfなどを使いたい場合は、ng-containerを使うようにする。

現象

• ion-contentを使っていたページで、なぜか不要なスクロールが発生してしまうなど、意図しない状態となりました。
• Chrome のdevlopment tool で確認したところ、ion-contentのサイズが意図通りになっていない(想定よりも高さが小さい)状態でした。

修正前のコード

• 不具合が起きていたコードは下記のような感じでした。
• isShowIntroが trueの時だけ、説明を表示します。app-introduction、app-titleは自作のコンポーネントです。
• 実際、動作はこのコードでも意図通りに動いていましたが、ion-contentの高さがなぜかページサイズよりも小さくなってしまいます。

start.page.html(不具合あり)

<div *ngIf="isShowIntro">
  <app-introduction></app-introduction>
</div>
<div *ngIf="!isShowIntro">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>{{'APPTITLE'| translate }}</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content [fullscreen]="true">
    <app-title></app-title>
  </ion-content>
</div>

修正後のコード

• divの代わりに ng-containerを使用したところ、正常に動作するようになりました。

start.page.html(不具合なし)

<ng-container *ngIf="isShowIntro">
  <app-introduction"></app-introduction>
</ng-container>
<ng-container *ngIf="!isShowIntro">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>{{'APPTITLE'| translate }}</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content [fullscreen]="true">
    <app-title></app-title>
  </ion-content>
</ng-container>

考察

• 公式のページもよく読んだのですが、ion-contentよりも上位に 不要なタグを入れてはいけないなどの記載がなかったため、なかなか問題に気づけませんでした。
• もし似たような現象に悩んでいる方がいましたら、確認してみてください。