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 git@github.com: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是一个侧滑菜单。

使用方法

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 Types

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实例数组

MenuClose

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

MenuToggle

该指令可以放在任何按钮，自动的开关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}); } }

Nav

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

使用方法

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

  是否开启滑动返回

Navbar

输入属性

• hideBackButton boolean

  是否隐藏回退键。

NavController

注入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

NavParams

类似于在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

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

NavPop

返回上一页的指令

1 2 3

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

NavPush

跳转到一个新的页面。

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	设置缩放的最大级别

Searchbar

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

使用方法

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)

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

 

 

转载于:https://www.cnblogs.com/itfantasy/p/6687047.html