二、消失的路由，源碼的解析基礎

時間 2019-12-01

原文原文鏈接

0、目錄結構html

一、看完上一章，必定會發現路由消失了，這章看一下ionic的初始化項目的源碼。es6

/* --- app.js ----*/
 
import {ViewChild} from '@angular/core';
import {App, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
 
 
@App({
  templateUrl: 'build/app.html',
  config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
  queries: {
    nav: new ViewChild('content')
  }
})
class MyApp {
  static get parameters() {
    return [[Platform], [MenuController]];
  }
  constructor(platform, menu) {
    this.platform = platform;
    this.menu = menu;
    this.initializeApp();
    // 設置咱們的應用程序的頁面
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];
    // make HelloIonicPage the root (or first) page
    this.rootPage = HelloIonicPage;
  }
  initializeApp() {
    this.platform.ready().then(() => {
      // 好的，這樣的平臺是現成的，咱們的插件是可用的。
      // 在這裏你能夠作任何你可能須要的更高水平的
      StatusBar.styleDefault();
    });
  }
 
  openPage(page) {
    // close the menu when clicking a link from the menu
    // 從菜單上點擊一個連接時，能夠關閉菜單
    this.menu.close();
    // navigate to the new page if it is not the current page
    // 若是不是當前頁面，則導航到新頁
    this.nav.setRoot(page.component);
  }
}
 
/* --- app.js ----*/

/* --- app.html ----*/
 
<ion-menu [content]="content">
 
  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>
 
  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)" >
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
 
</ion-menu>
 
<ion-nav [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
 
/* --- app.html ----*/

上述 app.js 中的紅色部分是配置側邊欄。紅色部分中的黑色部分要和app.html中的紅色部分的黑色部分對應上，這樣才能告訴瀏覽器渲染的子頁面

在 ion-nav(綠色部分)中顯示。

以後再來解析一下。<ion-nav [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

一、#content表明的是關聯的側邊欄。

二、上述的app.js的 紫色部分 openPage(page)方法。他的形參是一個page。記住這個形參

this.pages = [

{ title: 'Hello Ionic', component: HelloIonicPage },

{ title: 'My First List', component: ListPage }

];

由於 this 和 class類中的方法其實就至關於ng1中的 $scope 因此這個時候做用於起到了做用把這個方法和這個變量交給了 app.html 中

這個時候 app.html中的紫色部分

<ion-list>

<button ion-item *ngFor="let p of pages" (click)="openPage(p)" >

{{p.title}}

</button>

</ion-list>

他循環了 pages 以後獲得了p 以後

(click)="openPage(p)

意思就是說點擊這個按鈕的時候走openPage方法同時穿進去了一個p的參數

咱們得知 p.component是一個組件。

因此這個時候在這個方法裏。

this.menu.close(); 告訴咱們從菜單上點擊一個連接時，能夠關閉菜單

this.nav.setRoot(page.component); 告訴咱們若是不是當前頁面，則導航到新頁，！注意page是形參 p是實參。

四、在來看一下橙色部分

static get parameters() {

return [[Platform], [MenuController]];

}

他向 constructor(platform, menu);傳了兩個參數。

這兩個參數的由來是。 import {App, Platform, MenuController} from 'ionic-angular';

我記得、在typescript中我是這麼寫的。

constructor(platform : Platform, menu : MenuController);

由於這裏用的是 es2015 也就是es6編寫的。由於是默認模式。

三、root 是鏈接組件。由於在app.js中已經聲明瞭。this.rootPage = HelloIonicPage;

       而 HelloIonicPage 其實就是另外一個組件。import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';

因此這個時候 [root]="rootPage" 也就至關於默認到了 HelloIonicPage 組件的頁面當中。

下面來看一下 hellow-ionic 的js 與 html。

/* --- hello-ionic.html ----*/
 
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Hello Ionic</ion-title>
</ion-navbar>
 
 
<ion-content padding class="getting-started">
 
  <h3>Welcome to your first Ionic app!</h3>
 
  <p>
    This starter project is our way of helping you get a functional app running in record time.
  </p>
  <p>
    Follow along on the tutorial section of the Ionic docs!
  </p>
  <p>
    <button primary menuToggle>Toggle Menu</button>
  </p>
 
</ion-content>
 
/* --- hello-ionic.html ----*/

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

他是沒有路由參數的。ionic2好像比ng1還過度取消了路由。可是卻很吊。由於在 app.js 中 openPage(page) 方法已經講過他直接就利用了組件跳轉到了另外一個頁面因此

根本就不用配置 url 。好歹ng2有一個 @RouteConfig 能夠配置Name 和 path 傳參數用Roter 和 RoterParams 而ionic2呢。見識一下他的強大吧。

/* --- list.html ----*/
 
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>My First List</ion-title>
</ion-navbar>
 
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon name="{{item.icon}}" item-left></ion-icon>
      {{item.title}}
      <div class="item-note" item-right>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>
 
/* --- list.html ----*/

/* --- list.js----*/
 
import {Page, NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from '../item-details/item-details';
 
 
@Page({
  templateUrl: 'build/pages/list/list.html'
})
export class ListPage {
  static get parameters() {
    return [[NavController], [NavParams]];
  }
 
  constructor(nav, navParams) {
    this.nav = nav;
 
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');
 
    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
    'american-football', 'boat', 'bluetooth', 'build'];
 
    this.items = [];
    for(let i = 1; i < 11; i++) {
      this.items.push({
        title: 'Item ' + i,
        note: 'This is item #' + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }
 
  itemTapped(event, item) {
     this.nav.push(ItemDetailsPage, {
       item: item
     });
  }
}
 
/* --- list.js----*/

說是沒有了路由實際上他是沒有了路徑。先看 list.js 中的紅色部分。他定義了一個 items 循環把數據放進去造成了數組<對象>你懂得。

而後他在 list.html 中用 *ngFor 遍歷出來。在看 紅色部分 中的 黑色部分 (click)= "itemTapped($event, item) 能夠看得出來點擊某個button以後走這個方法

這個方法有兩個參數一個是$event事件。一個是item 這個item是單個的數據。例如： {title: "Item 3", note: "This is item #3", icon: "wifi"}

以後看這個方法作了什麼 灰色部分 首選你須要向別的組件提供一個參數，因此他須要 import {Page, NavController , NavParams} from 'ionic-angular' ; constuctor聲明就很少說了。

this .nav.push( ItemDetailsPage , {

item: item

});

好來比對一下 angular2 中的路由指向

this ._router.navigate( [ '/Animates/Movie' ,{

item: item

}])

對比一下發現 ionic2 中的 ItemDetailsPage 是組件 import {ItemDetailsPage} from '../item-details/item-details' ;

而 angular2 中的 '/Animates/Movie' 是@RouteConfig中的name

因此ionic2簡直了！

既然指向了組件而且傳了參數那麼如何接受參數呢？

/* --- item-details.html ----*/
 
<ion-navbar *navbar>
  <button menuToggle *ngIf="!selectedItem">
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Item Details</ion-title>
</ion-navbar>
 
<ion-content>
 <div *ngIf="selectedItem" class="selection">
    <b>{{selectedItem.title}}</b>
    <ion-icon name="{{selectedItem.icon}}"></ion-icon>
    <div>
      You navigated here from <b>{{selectedItem.title}}</b>
    </div>
  </div>
</ion-content>
 
/* ---item-details.html ----*/

/* --- item-details.js ----*/
 
import {Page, NavController, NavParams} from 'ionic-angular';
 
 
@Page({
  templateUrl: 'build/pages/item-details/item-details.html'
})
export class ItemDetailsPage {
  static get parameters() {
    return [[NavController], [NavParams]];
  }
 
  constructor(nav, navParams) {
    this.nav = nav;
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');
  }
}
 
/* --- item-details.js  ----*/