タブを使用しているときに、appComponent
で定義されているrootPageに戻る方法を知りたいのですが。 setRootメソッドが期待どおりに機能していません。タブページで使用すると、ナビゲーションスタックはクリアされません。 「ホームページ」では、ナビゲーショントグルの代わりに戻るボタンが表示され、タブのタイトルが表示されます。
デフォルトでは、ページはキャッシュされ、ナビゲーションスタック(たとえば、Push()の既存のページ)から離れてナビゲートされた場合、DOMに残ります。ナビゲーションスタックから削除されると(pop()またはsetRoot()で)破棄されます。
上記のステートメントは、setRootページを使用するとキャッシュからクリアされることを期待しています。これは、通常のページでは使用されているがタブでは使用されていない場合に当てはまるようです。
タブページのクラスには、ボタンがクリックされたときにルートページをホームに設定する関数があります。
goToHome() {
this.navCtrl.setRoot(HomePage);
}
HomePageに戻ったときに、戻るボタンがなく、コンポーネントのHTMLテンプレートで使用可能なホームのタイトルが使用されていることを確認するにはどうすればよいですか。
docs で確認できるように
上記のナビゲーションセクションと同様に、各
<ion-tab>
は[root]
プロパティにバインドすることに注意してください。これは、各<ion-tab>
が実際には単なるナビゲーションコントローラであるためです。 これは、各タブに独自の履歴スタックがあり、各タブの@Components
が子に挿入されたNavController
インスタンスが各タブに固有
つまり、ルートとしてページを設定する場合、アプリ全体ではなく、そのタブからナビゲーションスタックを使用しています。そのため、次のようにしてメインのナビゲーションスタックを取得する必要があります。
constructor(private app: App,...) {...}
その後
yourMethod(): void {
this.app.getRootNav().setRoot(YourPage);
}
これを試してみてください
this.childNavCtrl.setRoot(HomePage);