【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