ページの下部と上部にそれぞれタブとツールバーを備えた Web アプリケーションを実装したいと考えています。
タブバーのあるすべてのページで、タブバーは同じでなければならないと思います。つまり、同じコードです。また、それらのツールバーも同じものである可能性があります。
ツールバーにはボタンがあり、クリックするとタブのないページ全体が表示されますが、ツールバーには戻るボタンと他のいくつかのボタンがあります。このツールバーは別のものかもしれませんが、それで問題ありません。
エントリ ポイント ルート
'/'は、最初のタブのページがクリックされたかのように表示する必要があります。
問題は、これらすべてを適切に管理できないことです。
1つを取得すると、もう1つを失います。共有タブ バーとメイン ツールバーを取得すると、このビューのルートをタブ ビューにネストしていないため、まだ 2 つ持つことができますが、3 つを失い、最初のタブがあるページではなく空のページが表示されます。タブ バーとメイン ツールバーを共有する 共有タブ バーとツールバーを持つ別のルートのビュー内にタブ ビューを入れ子にします。
タブ バー ルートをルート内にネストしないと、タブ バーとツールバーの共有が失われます。また、メインツールバーから移動したページ内で、取得したくないタブバーを取得します。
プロジェクトで Stencil.js コンパイラとそのルーター アドオンを使用しています。新しい Ionic (バージョン 4) はまだベータ版であり、ナビゲーションでの使用方法が明確でないため、使用できません。
これらの問題は、ルーターがルート要素をネストするのではなく、ルート要素の url 属性を使用してルートをネストするという事実から引き起こされているようです。
共有タブ バー、ツールバー、およびビューを画面全体に表示せずに Web アプリの適切なナビゲーション パターンを処理するにはどうすればよいですか?