1、导航视图
angular2 中的是视图是显示在<router-outlet></router-outlet>里的同时他要依赖于 directives:[ ROUTER_DIRECTIVES ]，还必须要配置RouteConfig 然而ionic 是这样的。
/* ---示例代码----*/
import {Component} from ‘@angular/core‘;
import {ionicBootstrap} from ‘ionic-angular‘;
import {GettingStartedPage} from ‘./getting-started‘;
@Component({
template: `<ion-navswipeBackEnabled="false" [root]="rootPage"></ion-nav>`
})
class MyApp {
root = GettingStartedPage;
}
ionicBootstrap(MyApp);
/* ---示例代码----*/
其中 swipeBackEnabled="false" 代表是否可以后退
如上看来他直接省去了 RouteConfig 我们只需要控制 变量 root 所指向的 组件 就可以完成。视图的渲染器了。他的简便让我忘记了ng2.。。。。
2、ion-navbar
/* ---示例代码----*/
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Page Title
</ion-title>
<ion-buttons end>
<button (click)="openModal()">
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
/* ---示例代码----*/
作用于页面的导航header 他的效果。
3、NavController
首先需要导入。
/* ---示例代码----*/
import {NavController, NavParams} from ‘ionic-angular‘;
class MyComponent {
constructor(nav: NavController) {
this.nav = nav;
}
}
/* ---示例代码----*/
比较火热的就是 this.nav.setRoot(page,params,opt); 了这个方法 有三个参数。
1、page 组件 ： 想放进导航的 组件名称
2、params 参数：像下一个页面传递参数 Object类型
3、过度完成。返回一个promise
例如：
他还有一些方法 和生命周期。 http://ionicframework.com/docs/v2/api/components/nav/NavController/
还有就是 this.nav.push(page,params); 他是一个异步的。带有过度效果 而nav.setRoot()是一个view的切换 因此他并没有返回button之类的东西，当从一个页面过来 需要可以有后退按钮的时候 需要用到 push 比如 我一个view里面有3个页面 这三个页面并没有任何关系。这个时候用 setRoot 如果我是从一个页面进到他的类似于子页面的时候 这个时候可以用push
4、NavParams
/* ---示例代码----*/
export class MyClass{
constructor(params: NavParams){
this.params = params;
// userParams is an object we have in our nav-parameters
this.params.get(‘userParams‘);
}
}
/* ---示例代码----*/
他有一个get方法 接受 object里面的属性。和ng2一样。
5、NavPush 和 navParams 属性
我们上面看了this.nav.push他是一个方法。
我们在初始生成的时候 list.html 页面和 list.js是这么写的
/* ---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 {
selectedItem: any;
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
constructor(private nav: NavController, navParams: NavParams) {
// 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列表 绑定了 每个点击方法 。点击方法 又触发了 itemTapped方法 跳转到页面 ，这样的话做一些简单的操作 感觉没有必要再写一些方法了。这样很麻烦。
这个属性 可以很有效的帮助你。把html页面 红色部分
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
改成。 <button ion-item [navPush]="pushPage" [navParams]="{ item: item}" *ngFor="let item of items" >
再把js部分 的 itemTapped方法 改成。pushPage = ItemDetailsPage; ItemDetailsPage 对应着组件。
这样是不是很简单的就导航到另一个页面 并且传了参数？
5、nav-pop 返回
我在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>
<button block nav-pop>返回</button>
</ion-content>
/* ---示例代码----*/
他的作用是返回上级页面 这个时候他就可以返回到list页面了 这时候也体现出了 nav.setRoot() 与 nav.push(); 的差别 nav.setRoot() 是不允许返回的。