web-dev-qa-db-ja.com

Ionic 2-ページ間のナビゲーションを備えたサイドメニュー（戻るボタン）

ハイブリッドアプリの開発は初めてです。まず、Ionic 2.）のサイドメニューを使用してページ間のナビゲーションが可能かどうかを知りたいです。 このチュートリアル に示すようにページ間のナビゲーションを実装できました。 ionicdocs site に示すようなメニューです。しかし、メニュー項目をクリックすると、メニューによってページが「rootPage」に設定されるため、そのページにリダイレクトされますが、必要に応じてホームページに戻るメニューから行う必要があります。戻るボタンを押すだけです。

よろしくお願いします。これは私のapp.tsファイルです。

import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';

@App({
  template: `
<ion-menu [content]="content">
<ion-toolbar>
    <ion-title>Menu</ion-title>
</ion-toolbar>

<ion-content>
    <ion-list>
        <button ion-item (click)="openPage(categoriesPage)">
            Categorías
        </button>
        <button ion-item>
            Mis Compras
        </button>
        <button ion-item>
            Lista de Deseos
        </button>
        <button ion-item>
            Cerrar Sesión
        </button>
    </ion-list>
</ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  public rootPage;
  public app;
  public menu;
  public categoriesPage;

  constructor(app: IonicApp, platform: Platform, menu: MenuController) {

      this.app = app;
      this.menu = menu;
      this.categoriesPage = CategoriesPage;

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });

    this.rootPage = HomePage;
  }

  openPage(page){
    this.rootPage = page;
    this.menu.close();
  }
}

[〜＃〜] edit [〜＃〜]：NavControllerを使用するようにapp.tsを変更しましたが、ホームページも読み込まれなくなりました

import {App, IonicApp, Platform, NavController, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';

@App({
template: `
<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>

    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage(categoriesPage)">
                Categorías
            </button>
            <button ion-item>
                Mis Compras
            </button>
            <button ion-item>
                Lista de Deseos
            </button>
            <button ion-item>
                Cerrar Sesión
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  public rootPage;

  public app;
  public nav;
  public categoriesPage;

  constructor(app: IonicApp, platform: Platform, nav: NavController) {

      this.app = app;
      this.nav = nav;
      this.categoriesPage = CategoriesPage;

      platform.ready().then(() => {
          StatusBar.styleDefault();
    });

    this.rootPage = HomePage;

  }

  openPage(page){
    this.nav.Push(page, {"test": ""});
  }
}

categorys.html：

<ion-navbar *navbar>  
  <ion-title>
      Categories
  </ion-title>
</ion-navbar>
<ion-content class="categories">  
  <ion-list inset>
      <ion-item>
          <ion-label>Categories</ion-label>
      </ion-item>
  </ion-list>
</ion-content>
typescriptionic-frameworkangularionic2
6
myrmix

開きたいページをインポートする必要があります。

import {ExamplePage} from 'path/to/page';

次に、これをナビゲーション（スタック）にプッシュできます。

openPage() {
   this.nav.Push(ExamplePage);
}
2
Pascal Rijk

ナビゲートするページをページのスタックと見なします

  nav.Push(YourPage)

nav.Push（YourPags）を使用する場合-新しいページがスタックの一番上に追加され、前のビューがスタック自体に残り、戻るボタンを使用して前のビューに移動できるようになります

  nav.setRoot(YourPage)

nav.setRoot（YourPage）を使用する場合-ページをスタックの最初のビューとして設定し、スタック内の他のすべてのビューをクリアします

2
Athul Raj

ナビゲーションにNavControllerを使用したい http://ionicframework.com/docs/v2/api/components/nav/NavController/ 。コンストラクターを介してページに挿入し、openPage関数を変更するだけです。

openPage(page) {
   this.nav.Push(page);
}

ナビゲーションがスタックとして機能していると考えてください。スタック上のページを押すと、戻るボタンが表示され、スタックからページをポップできます。戻るボタンを表示するには、移動先のページ内でion-navbarタグを使用する必要があることに注意してください。

1
Pat Murray

その投稿は 別の回答 のコピーです。これは、ナビゲートしたり、ビューから別のビューにデータを送受信したりするのに役立ちます（明らかにすぐに問題が発生するため）：

まず、データを送信します：

import { YourPage } from '../yourpage/yourpage';

@Component({
  template: `<button [navPush]="pushPage [navParams]="params">Go</button>`
})
class MyPage {
  constructor(){
    this.pushPage = YourPage;
    this.params = { id: 42 };
  }
}

テンプレートのコンテンツは、templateUrlパラメーターでリンクされたhtmlファイルに書き込むことができます。このコードを使用すると、次のデータを使用してMyPageからYourPageにアクセスできます。{ id: 42 }。

詳細： http://ionicframework.com/docs/v2/api/components/nav/NavPush/

次に、データの受信

 constructor(public params: NavParams){
   // userParams is an object we have in our nav-parameters
   this.params.get('userParams');
 }

詳細： http://ionicframework.com/docs/v2/api/components/nav/NavParams/

0
Guillaume Le Mière