Nav

这是一个基本的导航控制器。

使用方法

  1. import {GettingStartedPage} from 'getting-started';
  2. @App({
  3.   template: `<ion-nav [root]="rootPage"></ion-nav>`
  4. })
  5. class MyApp {
  6.   constructor(){
  7.     this.rootPage = GettingStartedPage;
  8.   }
  9. }

Back navigation

swipeBackEnabled用来控制滑动返回。

  1. <ion-nav swipeBackEnabled="false" [root]="rootPage"></ion-nav>

下图是一个App的架构

  1.                               +-------+
  2.                               |  App  |
  3.                               +---+---+
  4.                               <ion-app>
  5.                                   |
  6.                      +------------+-------------+
  7.                      |   Ionic Nav Controller   |
  8.                      +------------+-------------+
  9.                               <ion-nav>
  10.                                   |
  11.                                   |
  12.                 Page 3  +--------------------+                     LoginPage
  13.               Page 2  +--------------------+ |
  14.             Page 1  +--------------------+ | |              +--------------------+
  15.                     | | Header           |<-----------------|       Login        |
  16.                     +--------------------+ | |              +--------------------+
  17.                     | | |                | | |              | Username:          |
  18.                     | | |                | | |              | Password:          |
  19.                     | | |  Page 3 is     | | |              |                    |
  20.                     | | |  only content  | | |              |                    |
  21.                     | | |                |<-----------------|                    |
  22.                     | | |                | | |              |                    |
  23.                     | | |                | | |              |                    |
  24.                     | +------------------|-+ |              |                    |
  25.                     | | Footer           |-|-+              |                    |
  26.                     | +------------------|-+                |                    |
  27.                     +--------------------+                  +--------------------+
  29.               +--------------------+    +--------------------+    +--------------------+
  30.               | Header             |    | Content            |    | Content            |
  31.               +--------------------+    |                    |    |                    |
  32.               | Content            |    |                    |    |                    |
  33.               |                    |    |                    |    |                    |
  34.               |                    |    |                    |    |                    |
  35.               |                    |    |                    |    |                    |
  36.               |                    |    |                    |    |                    |
  37.               |                    |    |                    |    |                    |
  38.               |                    |    |                    |    |                    |
  39.               |                    |    |                    |    |                    |
  40.               |                    |    +--------------------+    |                    |
  41.               |                    |    | Footer             |    |                    |
  42.               +--------------------+    +--------------------+    +--------------------+

输入属性

  • root Page

    当前打开的页面。

  • swipeBackEnabled boolean

    是否开启滑动返回