三、嵌套路由

同理 在看 嵌套路由的時候 來分析一下 ionic2 默認生成的 tabs 項目。目錄結構：

child 目錄是我新加的 由於這裏是要作用來作嵌套路由的。 首先先看app.js

/* --- app.js ----*/
 
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import { TabsPage } from './pages/tabs/tabs';
 
 
@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
 
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }
 
  constructor(platform) {
    this.rootPage = TabsPage;
 
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}
 
/* --- app.js  ----*/

看完上一章 以後 就以爲沒啥特別的嘛。看三個紅色部分就知道了。 貼 tabs 代碼。

/* --- html ----*/
 
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Tab 3" tabIcon="cog"></ion-tab>
</ion-tabs>
 
/* --- tabs.html  ----*/

/* --- tabs.js ---*/
 
import {Page} from 'ionic-angular';
import {Page1} from '../page1/page1';
import {Page2} from '../page2/page2';
import {Page3} from '../page3/page3';
 
@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
 
export class TabsPage {
  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = Page1;
    this.tab2Root = Page2;
    this.tab3Root = Page3;
  }
}
 
/* --- tabs.js ---*/

這個 也沒啥 可解釋的。root 對應着 組件 貼 pages

/* --- page1.html ---*/
 
<ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
</ion-navbar>
 
<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>
 
/* --- page1.html ---*/

/* --- page1.js ---*/
 
import {Page} from 'ionic-angular';
 
 
@Page({
  templateUrl: 'build/pages/page1/page1.html'
})
export class Page1 {
  constructor() {
 
  }
}
 
/* --- page1.js ---*/

/* --- page2.html ---*/
 
<ion-navbar *navbar>
  <ion-title>
    Tab 2
  </ion-title>
</ion-navbar>
 
<ion-content class="page2">
  2222222222222222222222222222
</ion-content>
 
/* --- page2.html ---*/

/* --- page2.js ---*/
 
import {Page} from 'ionic-angular';
 
@Page({
  templateUrl: 'build/pages/page2/page2.html'
})
export class Page2 {
  constructor() {
 
  }
}
 
/* --- page2.js ---*/

上邊的兩個代碼 沒有什麼新鮮的。。接下來看 我加入的 childs

/* --- one.html ---*/
 
<h1>我是嵌套頁面。！！one </h1>
 
/* --- one.html ---*/

/* --- one.js ---*/
 
import {Page} from 'ionic-angular';
 
@Page({
    templateUrl: 'build/pages/childs/one.html'
})
export class One {
    constructor() {
 
    }
}
 
/* --- one.js ---*/

也沒啥特別的嘛。無非就是寫了個頁面。接下來看page3作的事情。

/* --- page3.html ---*/
 
<ion-navbar *navbar>
  <ion-title>
    Tab 3
  </ion-title>
</ion-navbar>
 
<ion-content class="page3">
  333333333333333333333
  <ion-nav [root]="rootPage"></ion-nav>
</ion-content>
 
/* --- page3.html ---*/

/* --- page3.js ---*/
 
import {Page} from 'ionic-angular';
import { One } from '../childs/one.js';
 
@Page({
  templateUrl: 'build/pages/page3/page3.html'
})
export class Page3 {
  constructor() {
    this.rootPage = One;
  }
}
 
/* --- page3.js ---*/

我在page3中 加了一個 <ion-nav  [root]="rootPage" ></ion-nav> 而後 而後在js中添加了一個 組件One 那這個時候 就嵌套成功了。。

還記的angular2 中的 @RoterConfig 麼 父級要設置一個 @RoterConfig 子集也要設置一個。

可是 ionic2 直接 把組件放進去 就OK了。。