web-dev-qa-db-ja.com

タブからルートページに移動

タブを使用しているときに、appComponentで定義されているrootPageに戻る方法を知りたいのですが。 setRootメソッドが期待どおりに機能していません。タブページで使用すると、ナビゲーションスタックはクリアされません。 「ホームページ」では、ナビゲーショントグルの代わりに戻るボタンが表示され、タブのタイトルが表示されます。

デフォルトでは、ページはキャッシュされ、ナビゲーションスタック(たとえば、Push()の既存のページ)から離れてナビゲートされた場合、DOMに残ります。ナビゲーションスタックから削除されると(pop()またはsetRoot()で)破棄されます。

上記のステートメントは、setRootページを使用するとキャッシュからクリアされることを期待しています。これは、通常のページでは使用されているがタブでは使用されていない場合に当てはまるようです。

タブページのクラスには、ボタンがクリックされたときにルートページをホームに設定する関数があります。

goToHome() {
 this.navCtrl.setRoot(HomePage);
}

HomePageに戻ったときに、戻るボタンがなく、コンポーネントのHTMLテンプレートで使用可能なホームのタイトルが使用されていることを確認するにはどうすればよいですか。

8
Rik

docs で確認できるように

上記のナビゲーションセクションと同様に、各<ion-tab>[root]プロパティにバインドすることに注意してください。これは、各<ion-tab>が実際には単なるナビゲーションコントローラであるためです。 これは、各タブに独自の履歴スタックがあり、各タブの@Componentsが子に挿入されたNavControllerインスタンスが各タブに固有

つまり、ルートとしてページを設定する場合、アプリ全体ではなく、そのタブからナビゲーションスタックを使用しています。そのため、次のようにしてメインのナビゲーションスタックを取得する必要があります。

constructor(private app: App,...) {...}

その後

yourMethod(): void {
    this.app.getRootNav().setRoot(YourPage);
}
25
sebaferreras

これを試してみてください

this.childNavCtrl.setRoot(HomePage);
2
MIB