web-dev-qa-db-ja.com

Ionic 2-特定のビューの戻るボタンを無効にする

したがって、Ionic 2を少しいじっています。特定のビューの[戻る]ボタンを無効にする方法を知りたいです。

私がやっていることはthis.nav.Push(SomePage);動作しますが、NavControllerは自動的に戻るボタンをそこに配置します。戻るボタンを無効にするにはどうすればよいですか？

注：this.nav.setRoot(SomePage)を使用してSomePageをルートとして設定し、戻るボタンを使用できないことは知っていますが、NavControllerが自動的に行う便利なアニメーションは提供しません。

編集：この質問はやや古いですが、いくつかの注目を集めているので、ページをプッシュするためにthis.nav.setRootを使用したくない別の理由があることを将来の参照のために言及することも適切だと思います戻るボタンなし：既存のページのスタックを消去します。そのため、ユーザーにUIの方法を提供せずにコード内で前のページに戻ることができるようにしたい場合、setRootは許可しません。

angularionic2typescript1.8
43
naiveai

オプション1

hideBackButton属性をion-navbarコンポーネントに追加して、ビューで非表示にします

<ion-navbar hideBackButton="true">
    <ion-title>Sub Page</ion-title>
</ion-navbar>

オプション2

ViewControllerクラスが提供する.showBackButton(bool)メソッドを使用して、ページクラス内から非表示にします

import { NavController, ViewController } from 'ionic-angular';

export class SubPage {

    constructor(public navCtrl: NavController, private viewCtrl: ViewController) { }

    ionViewWillEnter() {
        this.viewCtrl.showBackButton(false);
    }

}

Ionic docs からのコメント

IonViewWillEnterの後に必ずこれを呼び出して、DOMがレンダリングされたことを確認してください。

注

ハードウェアの戻るボタンが押されたときにこれらのオプションが考慮されないことを追加したいと思います。ハードウェアの[戻る]ボタンは、アクティブページがナビゲーションスタックからポップする可能性があります。

85
Will.Harris

ルートページにいない場合、Ionic2はメニューボタンを非表示にし、戻るボタンを表示します。

あなたが言ったように、アニメーションは次のものがありません：

this.view.setRoot(SomePage);

これを「戻る」または「進む」アニメーションで記述します。

this.nav.setRoot(SomePage, {}, {animate: true, direction: "forward"});

さて、「フォワード」または「バック」ではないデフォルトのアニメーションが必要な場合はどうすればよいですか？

いくつかの方法があります。

1.これはデフォルトのアニメーションを提供します

現在のページで、次のように記述します。

this.nav.insert(0, SomePage).then(() => {
    this.nav.popToRoot();
});

2.何らかの理由でルートとして設定しないでください

this.view.Push(SomePage);

さてさて、今、私たちは物事を見ることに注意する必要があります。

  1. パート：戻るボタンを隠す
  2. 一部：ページはもうルートではないため、通常のメニューアイコンを再度表示する必要があります（そうしないと、戻るボタンを非表示にしただけではアイコンはまったく表示されません）。

menuIsHiddenプロパティに注目してください。

export class SomePage {
    // Part 2:
    menuIsHidden: boolean = false;

    constructor(private nav: NavController, private view: ViewController) {}

    // ionic2 will call this automatically
    ionViewWillEnter() {
        // Part 1:
        this.view.showBackButton(false);
    }
}

somePage.html

<ion-header>
 <ion-navbar>
    <button menuToggle [hidden]="menuIsHidden">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

これが誰かの助けになることを願っています。

34
Stefan Rein

以下を使用できますProperty DecoratorinIonic 2.0.0-rc.6

  <ion-header>
    <ion-navbar hideBackButton="true">
      <ion-title>
        Your page title
      </ion-title>
    </ion-navbar>
  </ion-header>

ドキュメントリファレンス

6
0x1ad2

hideBackButtonがメニューアイコンを非表示にしないようにするには、app.scssでこのcssを使用します。

ion-navbar[hidebackbutton] button[menutoggle] {
  display: block !important;
}

または、どこかに表示したい場合と表示したくない場合は、セレクタを次のように変更します：ion-navbar[hidebackbutton].show-menu button[menutoggle]

1
Sabri Aziri