大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

【Ionic/Angular】Tabsテンプレートで作ったIonicアプリにSideBarを追加する(エラー対応編)

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要

前回のブログ【Ionic/Angular】Tabsテンプレートで作ったIonicアプリにSideBarを追加する - 大田区から発信するゆるゆる日記でエラーが発生しました。

本来であれば前回の記事を修正するのがいいと思うのですが、前回の内容が多かったので新しく記事を書くことにしました。

エラー対応

エラー内容

各ページに設置した要素に何かしらのアクション(クリックなど)をしても反応しない。

原因

これはIonicの構造的な問題です。
HTMLの構造で考えるとすぐに分かりそうなことですが、「ion-content」と「ls-tabs」が干渉しあって「ls-tabs」がオーバーラッピング(overlapping)しています。

前回ブログのtab1/tab2/tab3.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>その他</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-button (click)="test()"></ion-button>
</ion-content>

<ls-tabs></ls-tabs>


解決

こちらの公式ガイドStructure - Ionic Documentationを見て解決しました。
以下のようにtab1/tab2/tab3.page.htmlとscssを変更します。

tab1/tab2/tab3.page.heml

...
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ls-tabs></ls-tabs>
  </ion-toolbar>
</ion-footer>
...

tab1/tab2/tab3.page.scss

...
@media screen and (min-width: 992px) {
  ion-footer {
    display: none;
  }
}
...


今後に向けて

「分かった!」と思ってしまうと一気に開発を進めてしまうので、少しずつ開発を進めるようにしたいです。

それ以前にテスト書いとけって話かもしれませんが...

参考資料

素晴らしい記事に感謝致します。
Structure - Ionic Documentation
angular - ion-button Click not firing up function in ionic 4 - Stack Overflow