Ionic2文档整理

Posted 从前端开发到全栈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ionic2文档整理相关的知识，希望对你有一定的参考价值。

来自：Rainey‘s Blog
原文地址：http://rainey.space/2016/04/06/Ionic2_Chinese_Document/
Github：https://github.com/XueRainey/ionic2

ionic2文档整理

发表于 2016-04-06   |  

本文档不是英文文档的完全翻译，是个人的阅读笔记。如果阅读后有不明白或者不懂，请移步英文版阅读。
如果本文有错误，请在本页末尾留言或者提交Issues。

您可以点击小标题跳转到相应的ionic2英文文档。

如果本文帮助到了你，请点击此处，帮作者点个star支持一下。

前言

声明：本仓库中的例子程序使用了ionic官方的例子ionic-preview-app。

运行：

  • git clone [email protected]:Raineye/ionic2.git
  • cd ionic-preview-app
  • npm install
  • ionic serve

ActionSheet

ActionSheet是一个对话框，让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互（点击背景会执行cancel的事件）。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。

ActionSheet会从一个button数组创建它的按钮选项。每一个按钮都拥有一些属性，例如text handler role 等等。如果handler返回false时，ActionSheet将不会消失。ActionSheet还可以选择有一个标题和副标题。

如果有一个button的role被设置为cancel那么这个按钮不管位于按钮数组的哪个位置它都会位于底部。ionic官方建议destructive类型的按钮最好位于数组的第一个位置。另外，如果ActionSheet是由于点击背景而被取消的，那么它将会执行和cancle类型的按钮点击一样的事件。

注意：如果有两个cancle类型的按钮，那么最后一个cancel类型的按钮会覆盖掉前面所有的cancel类型的按钮。

在创建ActionSheet的第一个参数中，你可以将所有的选项传递进去：`ActionSheet.create(opts)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
openMenu(){
this.actionSheet = ActionSheet.create({
title: ‘Albums‘,
buttons: [
{
text: ‘Destructive‘,
role: ‘destructive‘,
handler: () => {
console.log(‘Destructive clicked‘);
}
},
{
text: ‘Archive‘,
handler: () => {
console.log(‘Archive clicked‘);
}
},
{
text: ‘Cancel‘,
role: ‘cancel‘,
handler: () => {
console.log(‘Cancel clicked‘);
}
}
]
})
this.nav.present(this.actionSheet);
 
}

静态方法

create(opts)

属性名称类型描述
title string ActionSheet的标题
subTitle string ActionSheet的副标题
cssClass string 自定义样式的css类
enableBackdropDismiss boolean 用户点击背景是否关闭ActionSheet
buttons array<any> 显示的按钮的数组

按钮的属性

属性名称类型描述
text string 按钮上显示的文字
icon icon 按钮上显示的图标
handler any 点击后执行的函数
cssClass stirng
role string 如何显示按钮，destructive或者cancel。如果没有设置此选项，那么将显示默认的按钮。

实例方法

setTitle(title)

属性名称类型描述
title string 设置ActionSheet的标题

setSubTitle(subTitle)

属性名称类型描述
subTitle string 设置ActionSheet的子标题

addButton(button)

属性名称类型描述
button object ActionSheet的按钮。

Alert

Alert是一个对话框，可以向用户提供信息或者收集用户输入的信息。同样用户必须点击某个按钮才能销毁这个对话框。

和ActionSheet十分相似的是，点击role被设置成cancle的按钮和点击背景所触发的事件是一样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
constructor(nav: NavController) {
this.nav = nav;
}
 
presentAlert() {
let alert = Alert.create({
title: ‘Low battery‘,
subTitle: ‘10% of battery remaining‘,
buttons: [‘Dismiss‘]
});
this.nav.present(alert);
}
 
presentConfirm() {
let alert = Alert.create({
title: ‘Confirm purchase‘,
message: ‘Do you want to buy this book?‘,
buttons: [
{
text: ‘Cancel‘,
role: ‘cancel‘,
handler: () => {
console.log(‘Cancel clicked‘);
}
},
{
text: ‘Buy‘,
handler: () => {
console.log(‘Buy clicked‘);
}
}
]
});
this.nav.present(alert);
}
 
presentPrompt() {
let alert = Alert.create({
title: ‘Login‘,
inputs: [
{
name: ‘username‘,
placeholder: ‘Username‘
},
{
name: ‘password‘,
placeholder: ‘Password‘,
type: ‘password‘
}
],
buttons: [
{
text: ‘Cancel‘,
role: ‘cancel‘,
handler: data => {
console.log(‘Cancel clicked‘);
}
},
{
text: ‘Login‘,
handler: data => {
if (User.isValid(data.username, data.password)) {
// logged in!
} else {
// invalid login
return false;
}
}
}
]
});
this.nav.present(alert);
}

静态方法

creat(opts)

Alert选项

属性名称类型描述
title string
subTitle string
message string Alert显示的信息
cssClass string
inputs array Alert显示的输入框数组
buttons array
enableBackdropDismiss boolean 点击背景是否销毁Alert

Input选项

属性名称类型描述
type string input的类型，例如：text、tel、number等等
name string
placeHolder string input的占位符，未输入时的提示信息。
value string checkbox的值
label string checkbox显示的文字
checked boolean 是否选中
id string input的标识

Button的选项

属性名称类型描述
text string
handler any
cssClass string
role string null或者cancel

实例方法

setTitle(title)

  • title stirng

setSubTitle(subTitle)

setMessage(message)

addButton(button)

setCssClass(cssClass)

  • cssClass string

    添加css class 到alert的外层。

App

app是一个ionic的装饰器，它可以启动应用，是整个ionic应用的主入口。通过一系列的参数作为应用程序的全局配置变量。@App可以接受一个模板属性或者一个模板地址。

1
2
3
4
5
6
7
8
9
10
import {App} from ‘ionic-angular‘;
 
@App({
templateUrl: ‘app/app.html‘,
providers: [DataService]
})
 
export class MyApp{
// Anything we would want to do at the root of our app
}

属性

属性名称类型描述
config object app的配置信息
prodMode boolean 激活Angular的生产模式，在框架内关闭断言和其他检查。默认是false。
pipes array
providers array
template string
templateUrl string

Badges

Badges是一种小部件，通常用于数值显示。

1
2
3
4
5
<ion-item>
<ion-icon name="logo-twitter" item-left></ion-icon>
Followers
<ion-badge item-right>260k</ion-badge>
</ion-item>

Badges也可以给与颜色属性<ion-badge secondary></ion-badge>

Buttons

Button是ionic中的简单句子，可以显示文本、图标或者都显示。

属性

  • outline

    带有边框的透明按钮

  • clear

    不带边框的透明按钮

  • round

    大圆角的按钮

  • block

    一个填充其父容器的小圆角按钮

  • full

    填充其父容器的直角按钮

  • small

    一个小尺寸按钮

  • large

    一个大尺寸按钮

  • disabled

    一个不能点击的按钮

  • fab

    一个浮动的按钮

  • fab-left/fab-right/fab-center/fab-top/fab-bottom

    控制浮动按钮的位置

  • color

    动态设置按钮的颜色属性。

  • start\end

    在<ion-navbar>中的位置控制

Icon Buttons

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- Float the icon left -->
<button>
<ion-icon name="home"></ion-icon>
Left Icon
</button>
 
<!-- Float the icon right -->
<button>
Right Icon
<ion-icon name="home"></ion-icon>
</button>
 
<!-- Only icon (no text) -->
<button>
<ion-icon name="home"></ion-icon>
</button>

Cards

Cards是一个css组件

Card的组成

就像一个普通的页面一样，cards拥有一个头部和内容。

1
2
3
4
5
6
7
8
9
10
11
<ion-card>
<ion-card-header>
Header
</ion-card-header>
 
<img src="img/nin-live.png"/>
 
<ion-card-content>
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
</ion-card-content>
</ion-card>

Checkbox

复选框拥有一个布尔值来标记自己是否被选中，使用checked可以来默认选中复选框，使用disabled来禁用该复选框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ion-item>
<ion-label>Daenerys Targaryen</ion-label>
<ion-checkbox dark checked="true"></ion-checkbox>
</ion-item>
 
<ion-item>
<ion-label>Arya Stark</ion-label>
<ion-checkbox disabled="true"></ion-checkbox>
</ion-item>
 
<ion-item>
<ion-label>Jon Snow</ion-label>
<ion-checkbox [(ngModel)]="sausage"></ion-checkbox>
</ion-item>

特性

  • checked boolean

    复选框是否被选中

  • disabled boolean

    复选框是否禁用

事件

  • change

    当复选框状态变化时触发

Config

用来配置整个应用程序。

属性

名称ios默认MD默认
activator highlight ripple
actionSheetEnter action-sheet-slide-in action-sheet-md-slide-in
actionSheetLeave action-sheet-slide-out action-sheet-md-slide-out

alertEnter|alert-pop-in |alert-md-pop-in
alertLeave|alert-pop-out|alert-md-pop-out
backButtonText| Back
backButtonIcon| ion-ios-arrow-back| ion-md-arrow-back
iconMode| ios |md
menuType |reveal |overlay
modalEnter| modal-slide-in| modal-md-slide-in
modalLeave| modal-slide-out| modal-md-slide-out
pageTransition| ios-transition| md-transition
pageTransitionDelay| 16| 120
tabbarPlacement |bottom| top
tabbarHighlight | |top
tabbarLayout|
tabSubPages| |true

实例方法

get(key, fallbackValue)

  • key string

    config的键

  • fallbackValue any

getBoolean(key)

set(platform,key,value)

  • platform string

    “ios”或者”android”

Content

Content组件提供了易于使用的方法来控制滚动，同时可以和其他组件配合实现下拉刷新和上拉加载的功能。

实例方法

onScrollElementTransitionEnd()

scrollTo(x,y,duration,tolerance)

滚动到具体的坐标

  • x number

    x轴距离

  • y number

    y轴距离

  • duration number

    滚动动画的持续时间

  • tolerance TODO

此函数执行完毕后，返回一个Promise

scrollToTop()

滚动到顶部，执行完毕后返回一个Promise

getContentDimensions()

获取content的尺寸

Events

Events是一个发布订阅式的事件系统。

1
2
3
4
5
6
7
8
9
10
// first page (publish an event when a user is created)
function createUser(user) {
console.log(‘User created!‘)
events.publish(‘user:created‘, user);
}
 
// second page (listen for the user created event)
events.subscribe(‘user:created‘, (user) => {
console.log(‘Welcome‘, user);
});

实例方法

subscribe(topic,handler)

订阅某个事件，当有该事件被发布时，执行handler。

  • topic string

    订阅的主题

  • handler function

unsubscribe(topic, handler)

取消订阅某个主题。handler不再接受该主题发布的事件。

如果handler成功移除，改函数返回true

`publish(topic,eventData)

将事件发布到给定的主题

Grid

ionic基于flexbox制作了一套网格框架。

1
<ion-col width-10>This column will take 10% of space</ion-col>

列的百分比属性：

  • width-10 10%
  • width-20 20%
  • width-25 25%
  • width-33 33.3333%
  • width-50 50%
  • width-67 66.6666%
  • width-75 75%
  • width-80 80%
  • width-90 90%

用offset属性来设置列偏移（例如：offset-25）

HideWhen

HideWhen用来设置某个平台或者某个屏幕方向时显示的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div hideWhen="android">
I am hidden on Android!
</div>
 
<div hideWhen="ios">
I am hidden on iOS!
</div>
 
<div hideWhen="android,ios">
I am hidden on Android and iOS!
</div>
 
<div hideWhen="portrait">
I am hidden on Portrait!
</div>
 
<div hideWhen="landscape">
I am hidden on Landscape!
</div>

Icon

Icon会自动识别平台并使用该平台的设计Icon。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 自动的识别平台并使用该平台的icon -->
<ion-icon name="star"></ion-icon>
 
<!-- 手动设置ios和android平台的图标 -->
<ion-icon ios="ios-home" md="md-home"></ion-icon>
 
<!-- 总是使用同一个图标，无论什么平台 -->
<ion-icon name="ios-clock"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
 
<!-- 可变的name属性,myIcon是 -->
<ion-icon [name]="myIcon"></ion-icon>

属性

  • name string
  • ios string
  • md string

  • isActive bool

    设置该图标是否是活跃的图标。一般会用在tabbar中来将选中的tab图标置为活跃。

Id

Id是一个应用程序中元素的唯一标识，可以通过它来获取到元素从而进行访问。

使用

1
<ion-checkbox id="myCheckbox"></ion-checkbox>
1
2
3
4
5
6
7
8
9
10
constructor(app: IonicApp) {
this.app = app
}
 
ngAfterViewInit() {
var checkbox = this.app.getComponent("myCheckbox");
if (checkbox.checked) {
console.log(‘checkbox is checked‘);
}
}

通过IonicApp服务来访问元素。

注意：不建议使用Id，因为不能保证注册组件所在的页面是否已经被销毁或者离开当前视图。

InfiniteScroll

当用户滚动到页面底部时，可以通过InfiniteScroll执行一个动作。

可以用来实现上拉加载。

使用方法

1
2
3
4
5
6
7
8
9
10
11
<ion-content>
 
<ion-list>
<ion-item *ngFor="#i of items"></ion-item>
</ion-list>
 
<ion-infinite-scroll (infinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
 
</ion-content>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@Page({...})
export class NewsFeedPage {
 
constructor() {
this.items = [];
for (var i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
}
 
doInfinite(infiniteScroll) {
console.log(‘Begin async operation‘);
 
setTimeout(() => {
for (var i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
 
console.log(‘Async operation has ended‘);
infiniteScroll.complete();
}, 500);
}
 
}

Infinite Scroll Content

1
2
3
4
5
6
7
8
9
10
<ion-content>
 
<ion-infinite-scroll (infinite)="doInfinite($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
 
</ion-content>

实例方法

state()

complete()

调用该方法来表示加载已经完成。

enable(shouldEnable)

调用该方法可以设置InfiniteScroll是否处于激活状态。当shouldEnable是false时，InfiniteScroll将被禁用。

  • shouldEnable boolean

属性

  • threshold string

    设置滚动触发的阙值。例如距离底部还有10%的时候触发事件。

输出事件

  • infinite

Input

ion-input拥有很多文本类型，例如：text password email number search tel 和 url。

IonicApp

实例方法

setTitle(val)

设置网页标题。

isProd()

返回是否生产模式。默认为false。可以在@App中的config中配置。

isScrolling()

返回布尔值。

getComponent()

获取给定键值的组件。

Item

Item的使用有三种方法：

  • 使用<ion-item>来创建一个不可点击文本。
  • 使用 <button ion-item>。通常这个元素会有一个(click)处理程序
  • 使用<a ion-item>当项目需要包含一个链接。

ItemSliding

创建一个可滑动的Item。

1
2
3
4
5
6
7
8
9
10
11
<ion-list>
<ion-item-sliding *ngFor="#item of items">
<button ion-item (click)="itemTapped(item)">
 
</button>
<ion-item-options>
<button (click)="favorite(item)">Favorite</button>
<button (click)="share(item)">Share</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>

Keyboard

Keyboard允许你使用ionic键盘插件提供的键盘事件。

1
2
3
4
5
export class MyClass{
constructor(keyboard: Keyboard){
this.keyboard = keyboard;
}
}

实例方法

  • isOpen()

    检查键盘是否打开，返回一个boolean

  • onClose(callback)

    当键盘被关闭时回调一个callback
    返回callback

  • close()

    关闭键盘

List

实例方法

enableSlidingItems(shouldEnable)

是否开启滑动。

closeSlidingItems()

关闭滑动作

LocalStorage

LocalStorage的储存引擎使用浏览器的本地储存系统储存键值对。

它只应用于临时储存的数据。
为保证长期的储存，请使用sqlstorage引擎将数据储存在一个文件。

1
2
3
4
5
6
7
8
9
10
import {Page, Storage, LocalStorage} from ‘ionic-angular‘;
@Page({
template: `<ion-content></ion-content>`
});
export class MyClass{
constructor(){
this.local = new Storage(LocalStorage);
this.local.set(‘didTutorial‘, true);
}
}

实例方法

get(key)

通过键名来访问LocalStorage中储存的值。

set(key,value)

通过键值对储存到LocalStorage

remove(key)

删除LocalStorage中储存的键值对

clear()

Menu是一个侧滑菜单。

使用方法

Menu必须指定一个参考的content。

1
2
3
4
5
6
7
8
9
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
...
</ion-list>
</ion-content>
</ion-menu>
 
<ion-nav #mycontent [root]="rootPage"></ion-nav>

默认情况下菜单在左边滑动，你也可以使用side属性来让它从右边滑出。

1
<ion-menu side="right" [content]="mycontent">...</ion-menu>

如果你只是想简单的使用menu那么你可以使用menuToggle menuClose来控制menu的滑出和收回。

1
2
3
4
5
6
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button menuToggle>
<ion-icon name=‘menu‘></ion-icon>
</button>

如果你有多个menu从同一边滑出，你可以通过id来控制。

1
2
3
<ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>
1
2
3
4
enableAuthenticatedMenu() {
this.menu.enable(true, ‘authenticated‘);
this.menu.enable(false, ‘unauthenticated‘);
}

注意：如果你只有一个menu那么请不用使用id控制。尽量避免使用id。

menu可以设置显示的类型。

  • overlay是传统的MD设计
  • reveal是传统的ios设计

默认情况下，它们将自动使用当前平台的类型。

注：原文中还提到了一个push，我试过后发现和reveal是一样的，而且文章中也没有对push进行过多的解释。

实例方法

open()

打开菜单。返回一个Promise,当菜单被完全打开时，你可以执行一个事件。

close(menuId)

如果menuId为空，那么将关闭所有打开的菜单，如果menuId被设置，那么将关闭指定的菜单。返回一个Promise

toggle(menuId)

菜单开关。如果菜单当前关闭，那么将打开，如果菜单当前打开，将被关闭。
返回一个Promise。

enable(menuId)

当你有多个menu的时候，用于启用或禁用menu。当你启用一个menu那么同方向的其他menu将被禁用。
返回一个menu实例。

swipeEnable(shouldEnable,menuId)

isOpen()

返回一个布尔值来表示menu是否处于打开状态

isEnabled

返回一个布尔值来表示menu是否被启用

get(menuId)

返回一个menu实例，如果menuId的menu没有找到，那么将会返回null

getMenus()

返回menu实例数组

该指令可以放在任何按钮，自动的关闭打开的菜单。

该指令可以放在任何按钮，自动的开关menu。

Modals

Modals是一个当前页面上的内容窗口。通常它是用来做选择或者编辑一个项目。

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import {Page, Modal, NavController, NavParams} from ‘ionic-angular‘;
 
@Page(...)
class HomePage {
 
constructor(nav: NavController) {
this.nav = nav;
}
 
presentProfileModal() {
let profileModal = Modal.create(Profile, { userId: 8675309 });
this.nav.present(profileModal);
}
 
}
 
@Page(...)
class Profile {
 
constructor(params: NavParams) {
console.log(‘UserId‘, params.get(‘userId‘));
}
 
}

静态方法

create(componentType,data)

  • componentType any

    Modal类

  • data object

    传给Modal的数据

实例方法

注明：本实例方法在当前英文文档中没有。

onDismiss(call)

当Modal被销毁的时候执行的回调函数。
call是一个回调函数。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import {IonicApp, Modal, Platform, NavController, NavParams, Page, ViewController} from ‘ionic-angular‘;
 
 
 
@Page({
templateUrl: ‘./build/pages/modals/basic/template.html‘
})
export class BasicPage {
constructor(public nav: NavController) { }
 
openModal(characterNum) {
let modal = Modal.create(ModalsContentPage,{charNum:1});
this.nav.present(modal);
modal.onDismiss(data=>{console.log(data)});
}
}
 
@Page({
templateUrl: ‘./build/pages/modals/basic/modal-content.html‘
})
class ModalsContentPage {
character;
 
constructor(
public platform: Platform,
public params: NavParams,
public viewCtrl: ViewController
) {
this.character = this.params.get(‘charNum‘);
}
 
dismiss() {
this.viewCtrl.dismiss({a:1,b:2});
}
}

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

使用方法

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

Back navigation

swipeBackEnabled用来控制滑动返回。

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

下图是一个App的架构

                  +-------+
                  |  App  |
                  +---+---+
                  <ion-app>
                      |
         +------------+-------------+
         |   Ionic Nav Controller   |
         +------------+-------------+
                  <ion-nav>
                      |
                      |
    Page 3  +--------------------+                     LoginPage
  Page 2  +--------------------+ |
Page 1  +--------------------+ | |              +--------------------+
        | | Header           |<-----------------|       Login        |
        +--------------------+ | |              +--------------------+
        | | |                | | |              | Username:          |
        | | |                | | |              | Password:          |
        | | |  Page 3 is     | | |              |                    |
        | | |  only content  | | |              |                    |
        | | |                |<-----------------|                    |
        | | |                | | |              |                    |
        | | |                | | |              |                    |
        | +------------------|-+ |              |                    |
        | | Footer           |-|-+              |                    |
        | +------------------|-+                |                    |
        +--------------------+                  +--------------------+

  +--------------------+    +--------------------+    +--------------------+
  | Header             |    | Content            |    | Content            |
  +--------------------+    |                    |    |                    |
  | Content            |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    |                    |    |                    |
  |                    |    +--------------------+    |                    |
  |                    |    | Footer             |    |                    |
  +--------------------+    +--------------------+    +--------------------+

输入属性

  • root Page

    当前打开的页面。

  • swipeBackEnabled boolean

    是否开启滑动返回

输入属性

  • hideBackButton boolean

    是否隐藏回退键。

注入NavController

1
2
3
4
5
class MyComponent {
constructor(nav: NavController) {
this.nav = nav;
}
}

页面展示

页面创建可以使用@Page装饰器。

当页面被添加到navigation栈的时候，页面就被展示了，使用push()方法。

页面销毁时将从navigation栈中移除（使用pop()或者setRoot()）。

生命周期

1
2
3
4
5
6
7
8
9
10
11
@Page({
template: ‘Hello World‘
})
class HelloWorld {
onPageLoaded() {
console.log("I‘m alive!");
}
onPageWillLeave() {
console.log("Looks like I‘m about to leave :(");
}
}

  • onPageLoaded

    当页面加载时运行，每被创建并且添加到DOM树时执行一次。如果页面切换但是被缓存下来，再次进入此页面时，将不会触发该事件。

  • onPageWillEnter

    当页面即将进入并成为活动页时触发

  • onPageDidEnter

    当页面完全进入成为活动页面时执行，不管是否被缓存，都将执行。

  • onPageWillLeave

    页面即将成为非活动页时触发

  • onPageDidLeave

    当页面切换，该页面已经成为非活动页时触发

  • onPageWillUnload

    当页面即将被销毁时执行

  • onPageDidUnload

    当页面已经被销毁时执行

实例方法

setRoot(page,params,opts)

设置当前navigation栈的根节点

属性名称类型描述
page Type 页面的类型
params object 传递到下一个视图的参数
opts object 过渡选项

返回：Promise

setPages(pages,opts)

用来设置navigation栈。你可以用它改变navigation的历史记录和切换动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import {Page, NavController} from ‘ionic-angular‘;
import {Info} from ‘../info/info‘;
import {List} from ‘../list/list‘;
import {Detail} from ‘../detail/detail‘;
 
export class Home {
constructor(nav: NavController) {
this.nav = nav;
}
setPages() {
this.nav.setPages([{
page: Info
}, {
page: List,
params: {tags: ‘css‘}
}, {
page: Detail,
params: {id: 325}
}], {
animate: true
});
}
}
属性名称类型描述
pages array 页面类型和参数组成的数组
opts object 过渡选项

返回：Promise

push(page,params,opts)

属性名称类型描述
page Type 页面的类型
params object 传递到下一个视图的参数
opts object 过渡选项

返回：Promise

present(enteringView,opts)

添加组件到navigation栈中，例如：ActionSheet Alert Modal等

1
2
3
4
5
6
7
8
9
10
class MyClass{
constructor(nav: NavController) {
this.nav = nav;
}
 
presentModal() {
let modal = Modal.create(ProfilePage);
this.nav.present(modal);
}
}
属性名称类型描述
enteringView ViewController 组件的控制器
opts object 过渡选项

返回：Promise

insert(insertIndex,page,params,opts)

插入一个视图到navigation栈。

属性名称类型描述
insertIndex number 插入的索引
page Type 页面的类型
params object 传递到下一个视图的参数
opts object 过渡选项

返回：Promise

insertPages(insertIndex,insertPages,opts)

属性名称类型描述
insertIndex number 插入的索引
insertPages array 页面类型和参数组成的数组
opts object 过渡选项

返回：Promise

pop(opts)

如果你想后退，那么可以调用该方法。

1
2
3
4
5
6
7
8
class SecondView{
constructor(nav:NavController){
this.nav = nav;
}
goBack(){
this.nav.pop();
}
}
属性名称类型描述
opts object 过渡选项

popToRoot(opts)

直接跳转到根导航，不管在navigite栈中有多少视图。

属性名称类型描述
opts object 过渡选项

popTo(view,opts)

将当前视图到该视图的历史记录弹出，并跳转到指定视图。

属性名称类型描述
view ViewController
opts object 过渡选项

remove(startIndex,removeCount,opts)

删除栈里指定索引段的元素。

属性名称类型描述
startIndex number 从栈中删除页面的起始索引，默认为最后一页的索引
removeCount number 从栈中删除多少个页面，默认为1
opts object 过渡选项

返回一个Promise

canSwipeBack()

返回一个布尔值，来表示当前是否支持滑动返回

canGoBack()

返回一个布尔值，来表示是否还有可返回的页面

getByIndex(index)

返回指定索引的组件

getActive()

返回当前活动页面的视图控制器

isActive(view)

返回一个布尔值，来表示该视图是否是当前活动页面。

getPrevious(view)

返回指定页面的视图控制器

first()

返回当前栈中第一个的视图控制器

last()

返回当前栈中最后一个的视图控制器

indexOf(view)

返回某个视图在栈中的索引

length()

返回栈的长度。

rootNav()

返回NavController

类似于在Ionic V1版本中的$stateParams用来在页面中传递数据。

1
2
3
4
5
6
7
export class MyClass{
constructor(params: NavParams){
this.params = params;
// userParams is an object we have in our nav-parameters
this.params.get(‘userParams‘);
}
}

实例方法

data()

get(parameter)

  • parameter string

    是数据中键值对中的键名。

返回上一页的指令

1
2
3
<ion-content>
<div block button nav-pop>go back</div>
</ion-content>

跳转到一个新的页面。

1
<button [navPush]="pushPage" [navParams]="params"></button>

Option

ion-option是ion-select的子组件。

输入

  • checked boolean

    是否被选中

  • value any

    该选项的值

Page

@Page装饰器包含IONIC_DIRECTIVE中所有的组件和指令以及Angular中的CORS_DIRECTIVES和 FORM_DIRECTIVES。所以你只需要将你自定义的指令和组件依赖进去就好。

使用方法

1
2
3
4
5
6
7
8
@Page({
template: `
<ion-content>
I am a page!
</ion-content>
`
})
class MyPage {}

此时@Page已经帮你把那些指令注入进去了，所以你无需再次增加directives数组。

如果你需要自定义一个组件，而且需要依赖某个指令时，你需要手动加入。

1
2
3
4
5
6
7
8
9
import {IONIC_DIRECTIVES} from ‘ionic-angular‘;
@Component({
selector: ‘my-component‘
template: `<div class="my-style">
<ion-checkbox></ion-checkbox>
</div>`,
directives: [IONIC_DIRECTIVES]
})
class MyCustomCheckbox {}

或者你可以指定明确的指令来获取，并单独添加它。

1
2
3
4
5
import {Checkbox, Icon} from ‘ionic-angular‘
@Component({
...
directives: [Checkbox, Icon]
})

然而，使用IONIC_DIRECTIVES不会产生额外的性能开销，所以，又有什么理由不用它呢。

Platform

用来返回当前平台信息。它比ionic V1版本复杂，并不是单纯的返回一个平台信息，还有更多的信息，例如：设备系统，手机还是平板，移动app还是浏览器。

实例方法

is(platformName)

返回一个布尔值来表示当前平台是否是platformName。

注意：同一个环境下，当platformName不同时，可能不止有一个返回true。例如，Ipad可能返回true的platformName有：mobile ios ipad tablet等。

可能有的平台名有：

  • android
  • cordova
  • core
  • ios
  • ipad
  • iphone
  • mobile
  • mobileweb
  • phablet
  • tablet
  • windows
1
2
3
4
5
6
7
8
9
10
11
import {Platform} from ‘ionic-angular‘;
 
@Page({...})
export MyPage {
constructor(platform: Platform) {
if (platform.is(‘ios‘)) {
// what ever you need to do
// if the platform is ios
}
}
}

platforms()

返回一个平台数组。

同一个环境下，可能会返回多个平台信息。

versions(platformName)

返回一个包含系统相关信息的对象。

ready()

返回一个Promise来表示设备是否准备好开始运行程序了。

setDir(dir)

设置文字的排列方向。

  • dir string

    ltr代表从左到右的排列
    rtl代表从右到左的排列

dir()

返回文字排列方向。

isRTL()

返回一个布尔值，来表示当前文本是否是从右到左排列的。

setLang(language)

设置语言。

  • language string

    en-US en-GB ar de zh es-MX等。

lang()

返回当前语言

RadioButton

单选按钮必须包含在<ion-list radio-group>中，并且至少有两个。

使用方法

1
2
3
4
<ion-item>
<ion-label>Radio Label</ion-label>
<ion-radio value="radio-value"></ion-radio>
</ion-item>

输出事件

  • select

    选择的时候执行的事件。

RadioGroup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<ion-list radio-group [(ngModel)]="autoManufacturers">
 
<ion-list-header>
Auto Manufacturers
</ion-list-header>
 
<ion-item>
<ion-label>Cord</ion-label>
<ion-radio value="cord"></ion-radio>
</ion-item>
 
<ion-item>
<ion-label>Duesenberg</ion-label>
<ion-radio value="duesenberg"></ion-radio>
</ion-item>
 
<ion-item>
<ion-label>Hudson</ion-label>
<ion-radio value="hudson"></ion-radio>
</ion-item>
 
<ion-item>
<ion-label>Packard</ion-label>
<ion-radio value="packard"></ion-radio>
</ion-item>
 
<ion-item>
<ion-label>Studebaker</ion-label>
<ion-radio value="studebaker"></ion-radio>
</ion-item>
 
</ion-list>

输出事件

  • change

    在选择改变时执行的事件。

Refresher

用来实现下拉刷新功能。

使用方法

1
2
3
4
5
6
7
8
9
<ion-content>
 
<ion-refresher (refresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
 
<!-- 其他代码 -->
 
</ion-content>
1
2
3
4
5
6
7
8
9
10
11
12
13
@Page({...})
export class NewsFeedPage {
 
doRefresh(refresher) {
console.log(‘Begin async operation‘, refresher);
 
setTimeout(() => {
console.log(‘Async operation has ended‘);
refresher.complete();
}, 2000);
}
 
}

Refresher Content

1
2
3
4
5
6
7
8
9
10
11
12
<ion-content>
 
<ion-refresher (refresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
 
</ion-content>

实例方法

state

获取当前的刷新状态。状态有：

  • inactive

    没有下拉，被隐藏状态

  • pulling

    用户正在下拉，但还没松手。

  • cancelling

    用户下拉放手后，没有达到触发刷新的距离的状态。

  • ready

    用户下拉的足够远，如果放手就开始更新。

  • refreshing

    正在刷新，等待异步操作结束。

  • completing

    刷新成功的状态。

startY

返回用户开始下拉的Y坐标

currentY

返回当前触摸或鼠标事件的Y坐标。

deltaY

返回开始下拉的Y坐标距离当前触摸或鼠标事件的Y坐标的差值。

progress

0代表还没有到达某个距离，不触发刷新，1代表已经到达某个距离，松手触发刷新。

complete()

当你异步操作完成后，调用这个函数来关闭刷新动画，同时改变了状态。

cancel()

将状态从refreshing改变成cancelling

输入

属性名称类型描述
pullMin number 用户最小的下拉距离，默认为60
pullMax number 用户下拉的最大距离，超过该距离后，自动进入刷新。默认最大距离为：pullmin+60。
closeDuration number 多少毫秒它需要关闭组件，默认为280
snapbackDuration number 默认280
enabled boolean 是否启用该组件

输出事件

  • refresh

    刷新事件。不要忘记在异步事件执行完成后调用complete()

  • pulling

    当用户下拉的时候调用。

  • start

    当用户开始下拉的时候调用。

Scroll

1
2
3
4
5
6
7
8
<ion-scroll scrollX="true">
</ion-scroll>
 
<ion-scroll scrollY="true">
</ion-scroll>
 
<ion-scroll scrollX="true" scrollY="true">
</ion-scroll>

属性

属性名称类型描述
scrollX boolean 是否启用x轴滚动
scrollY boolean 是否启用Y轴滚动
zoom boolean 是否启动缩放
maxZoom number 设置缩放的最大级别

管理一个搜索栏，可以搜索或筛选项目的显示。

使用方法

1
2
3
4
5
6
<ion-searchbar
[(ngModel)]="myInput"
[hideCancelButton]="shouldHideCancel"
(input)="onInput($event)"
(cancel)="onCancel($event)">
</ion-searchbar>

输入属性

属性名称类型描述
cancelButtonText string 设置取消按钮的文本值
hideCancelButton boolean 是否隐藏取消按钮
debounce number 每次键入字符等待触发事件的时间有多长，默认为250毫秒
placeholder string 占位提示符
ngModel any 搜索栏值的双向绑定

输出事件

  • input

    当Searchbar中值变化的时候触发

  • blur

    当Searchbar失去焦点的时候触发

  • focus

    当Searchbar得到焦点的时候触发

  • cancel

    当取消按钮被点击的时候触发

  • clear

    当清空按钮被点击的时候触发

Segment

Segment是一组按钮，允许用户和一组按钮进行交互，类似于标签页的功能。

使用方法

1
2
3
4
5
6
7
8
<ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger>
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>

输出事件

  • change

    当按钮改变时触发事件。

Select

ion-select和html中的select有点相似。

单选

1
2
3
4
5
6
7
<ion-item>
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="f" checked="true">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>

多选

1
2
3
4
5
6
7
8
9
10
11
<ion-item>
<ion-label>Toppings</ion-label>
<ion-select [(ngModel)]="toppings" multiple="true">
<ion-option>Bacon</ion-option>
<ion-option>Black Olives</ion-option>
<ion-option>Extra Cheese</ion-option>
<ion-option>Mushrooms</ion-option>
<ion-option>Pepperoni</ion-option>
<ion-option>Sausage</ion-option>
</ion-select>
<ion-item>

Alert按钮

默认为Cancel和OK

1
2
3
<ion-select okText="Okay" cancelText="Dismiss">
...
</ion-select>

Alert选项

使用alertOptions可以覆盖Alert的配置。例如可以更改标题。

1
2
3
4
5
6
7
8
<ion-select [alertOptions]="alertOptions">
...
</ion-select>
 
this.alertOptions = {
title: ‘Pizza Toppings‘,
subTitle: ‘Select your toppings‘
};

输入

  • multiple boolean

    是否可以接受多个选项

  • disabled boolean

    组件是否被禁用

输出事件

  • change

    当选项改变时触发

  • cancel

    取消时触发

ShowWhen

用来表示某平台或者某屏幕方向时时显示该元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div showWhen="android">
I am visible on Android!
</div>
 
<div showWhen="ios">
I am visible on iOS!
</div>
 
<div showWhen="android,ios">
I am visible on Android and iOS!
</div>
 
<div showWhen="portrait">
I am visible on Portrait!
</div>
 
<div showWhen="landscape">
I am visible on Landscape!
</div>

Slides

Slides是基于Swiper.js实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@Page({
template: `
<ion-slides pager (change)="onSlideChanged($event)" (move)="onSlideMove($event)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<p>
The number one app for everything awesome.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
</ion-slide>
</ion-slides>
`
})

输入

属性名称类型描述
pager boolean 是否显示索引点
options any 任何Slider需要配置的参数，可以参考http://www.idangero.us/swiper/api/
zoom number 该组件是否可以缩放
zoomDuration number 缩放该组件需要多长时间
zoomMax number 最大的缩放

输出事件

  • change

    当滑块变化的时候触发

  • slideChangeStart

    当滑块开始更改时触发

  • move

    当滑块移动时触发

SqlStorage

SqlStorage采用SQLite查询。在文件系统中持久的储存数据，这是首选的储存引擎。引擎支持简单的键值对存储和完整的Sql查询。

1
2
3
4
5
6
7
8
let storage = new Storage(SqlStorage, options);
storage.set(‘name‘, ‘Max‘);
storage.get(‘name‘).then((name) => {
});
 
// Sql storage also exposes the full engine underneath
storage.query(‘insert into projects(name, data) values("Cool Project", "blah")‘);
storage.query(‘select * from projects‘).then((resp) => {})

静态方法

BACKUP_LOCAL()

BACKUP_LIBRARY()

BACKUP_DOCUMENTS()

实例方法

query(query,params)

在数据库中执行SQL操作。

  • query string

    sql字符串

  • params array

返回一个Promise

get(key)

从数据库中获取给定的键名所对应的键值。

返回一个Promise

set(key,value)

从数据库中插入键值对

返回一个Promise

remove(key)

从数据库中删除键值对。

返回一个Promise

clear()

清空数据库

Tab

底部的标签按钮

使用方法

一般ion-tab都有一个[root]值来加载该组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ion-tabs>
<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"><ion-tab>
</ion-tabs>
 
 
 
import {Chat} from ‘../chat/chat‘;
export class Tabs {
constructor(){
// here we‘ll set the property of chatRoot to
// the imported class of Chat
this.chatRoot = Chat
}
}

输入

属性名称类型描述
root Page 设置根页面
rootParams object 传递数据到该页面
tabTitle string 页面标题
tabIcon string 页面图标
tabBadge string 设置徽章
tabBadgeStyle string 设置徽章颜色

输出事件

  • select

    选中时触发。

Tabs

实例方法

select(index)

选中某个索引的选项卡

getByIndex(index)

返回一个和索引匹配的选项卡

getSelected()

返回当前选中的选项卡

输入

属性名称类型描述
selectedIndex number 第一次加载时默认选中的选项卡，如果不提供那么默认是0
preloadTabs boobean 是否预加载所有标签
tabbarIcons string 这个属性是过时的，请使用TabBarLayout代替，设置图标的位置top bottom left right hide
tabbarLayout string 设置tabbar的布局 icon-top icon-lefticon-right icon-bottom icon-hidetitle-hide
tabbarPlacement string 设置tabbar的位置：top bottom

输出事件

  • change

    当标签页改变时触发

TextArea

1
2
3
4
<ion-item>
<ion-label stacked>Message</ion-label>
<ion-textarea [(ngModel)]="msg"></ion-textarea>
</ion-item>

Toggle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ion-list>
 
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
</ion-item>
 
<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
</ion-item>
 
<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
</ion-item>
 
</ion-list>

属性

  • checked boolean

    是否打开

  • disabled boolean

    是否禁用

输入

  • checked
  • disabled

输出事件

  • change

    切换时触发

Toolbar

Toolbar是一条在上面或者在下面的通用栏。

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ion-toolbar>
<ion-title>My Toolbar Title</ion-title>
</ion-toolbar>
 
<ion-toolbar>
<ion-title>I‘m a subheader</ion-title>
</ion-toolbar>
 
<ion-content></ion-content>
 
<ion-toolbar position="bottom">
<ion-title>I‘m a subfooter</ion-title>
</ion-toolbar>
 
<ion-toolbar position="bottom">
<ion-title>I‘m a footer</ion-title>
</ion-toolbar>

属性

  • position any

    设置toolbar的位置，默认是top

ViewController

访问当前视图的功能和信息

使用方法

1
2
3
4
5
6
7
import {Page, ViewController} from ‘ionic-angular‘;
@Page....
export class MyPage{
constructor(viewCtrl: ViewController){
this.viewCtrl = viewCtrl;
}
}

实例方法

  • componentType()

  • subscribe()

  • onDismiss()

  • dismiss()

  • enableBack(Check)
    检查navigation栈中是否可以返回

  • index()
    查询在当前视图navigation栈中的索引

  • isFirst()
    返回一个布尔值，来表示是否是栈中第一个视图

  • isLast()

  • hasNavbar()
    返回一个布尔值，来表示是否拥有navBar

  • setBackButtonText(backButtonText)
    更改后退按钮的文本

  • showBackButton(Set)

设置当前视图的后退按钮是否可见

 
 

以上是关于Ionic2文档整理的主要内容，如果未能解决你的问题，请参考以下文章

ionic2新手入门整理，搭建环境，创建demo，打包apk，热更新，优化启动慢等避坑详解

Ionic2 错误：“没有存储提供程序”

IOS开发－OC学习－常用功能代码片段整理

VS2015 代码片段整理

Ionic 2 中生命周期的命名改变及说明

小程序各种功能代码片段整理---持续更新