Ionic 2 - Menu bên với điều hướng giữa các trang (nút quay lại)

Question

Tôi mới phát triển ứng dụng lai. Trước tiên, tôi muốn biết liệu có thể điều hướng giữa các trang bằng menu bên trong Ionic 2. Tôi có thể triển khai điều hướng giữa các trang như được hiển thị trong this tutorial và menu như được hiển thị trong ionicdocs site hay không. Nhưng khi tôi nhấp vào một mục trình đơn, trình đơn đặt trang là "rootPage", vì vậy tôi được chuyển hướng đến trang đó, nhưng nếu tôi muốn quay lại trang chủ, tôi phải thực hiện điều đó thông qua trình đơn, tôi muốn chỉ cần nhấn nút quay lại.

Cảm ơn trước, đây là app.ts tập tin của tôi:

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: app.ts Modified để sử dụng NavController, nhưng bây giờ nó thậm chí còn không tải trang chủ

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": ""}); 
    } 
} 

categories.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> 

Answer 1

Bạn muốn sử dụng NavController để điều hướng http://ionicframework.com/docs/v2/api/components/nav/NavController/. Chỉ cần tiêm nó vào trang của bạn thông qua các nhà xây dựng và sau đó thay đổi chức năng openPage của bạn:

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

Hãy suy nghĩ về điều hướng làm việc như một chồng. Bạn đẩy một trang trên ngăn xếp và sau đó một nút quay lại sẽ xuất hiện cho phép bạn bật trang ra khỏi ngăn xếp. Xin lưu ý rằng để nút quay lại xuất hiện, bạn phải sử dụng thẻ ion-navbar trong trang bạn đang điều hướng đến.

Answer 2

Bạn cần phải nhập khẩu các trang web mà bạn muốn te mở:

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

và sau đó bạn có thể đẩy này đến nav (stack):

openPage() { 
    this.nav.push(ExamplePage); 
} 

Answer 3

bài Đó là một bản sao của another answer tôi đã đưa ra điều đó sẽ giúp bạn điều hướng và gửi và nhận dữ liệu từ chế độ xem này sang chế độ xem khác (vì bạn rõ ràng sẽ gặp vấn đề đó sớm):

Firs t, gửi dữ liệu:

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

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

Nội dung của mẫu có thể được viết bằng tệp html được liên kết bởi thông số templateUrl. Mã đó sẽ cho phép bạn truy cập YourPage từ MyPage với các dữ liệu sau: { id: 42 }.

Thông tin thêm: http://ionicframework.com/docs/v2/api/components/nav/NavPush/

Thứ hai, nhận dữ liệu

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

Thông tin thêm: http://ionicframework.com/docs/v2/api/components/nav/NavParams/

Answer 4

Hãy xem xét các trang mà bạn điều hướng như một chồng trang

nav.push(YourPage) 

khi bạn sử dụng điều hướng.push (YourPags) - trang mới sẽ được thêm vào phía trên cùng của ngăn xếp và sau đó các quan điểm trước đó vẫn còn trong ngăn xếp, cho phép bạn sử dụng nút back để điều hướng giao diện trước đó

nav.setRoot(YourPage) 

khi bạn sử dụng nav .setRoot (YourPage) - đặt trang làm chế độ xem đầu tiên trong ngăn xếp và xóa tất cả các chế độ xem khác trong ngăn xếp