首页 > 代码库 > Ionic2文档整理

Ionic2文档整理

2024-09-13 17:44:24 219人阅读

来自：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)。

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的按钮和点击背景所触发的事件是一样的。

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: [

{

placeholder: ‘Username‘

{

placeholder: ‘Password‘,

type: ‘password‘

}

buttons: [

{

text: ‘Cancel‘,

role: ‘cancel‘,

handler: data =http://www.mamicode.com/> {

console.log(‘Cancel clicked‘);

}

{

text: ‘Login‘,

handler: data =http://www.mamicode.com/> {

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可以接受一个模板属性或者一个模板地址。

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是一种小部件，通常用于数值显示。

<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

<ion-icon name="home"></ion-icon>

Left Icon

</button>

Right Icon

<ion-icon name="home"></ion-icon>

</button>

<ion-icon name="home"></ion-icon>

</button>

Cards

Cards是一个css组件

Card的组成

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

<ion-card>

<ion-card-header>

Header

</ion-card-header>

<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来禁用该复选框。

<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

实例方法

`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是一个发布订阅式的事件系统。

// 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);

});

实例方法

订阅某个事件，当有该事件被发布时，执行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用来设置某个平台或者某个屏幕方向时显示的元素。

I am hidden on Android!

</div>

I am hidden on iOS!

</div>

I am hidden on Android and iOS!

</div>

I am hidden on Portrait!

</div>

I am hidden on Landscape!

</div>

Icon

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

<ion-icon name="star"></ion-icon>

<ion-icon ios="ios-home" md="md-home"></ion-icon>

<ion-icon name="ios-clock"></ion-icon>

<ion-icon name="logo-twitter"></ion-icon>

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

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执行一个动作。

可以用来实现上拉加载。

使用方法

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

@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

<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。

<ion-list>

<ion-item-sliding *ngFor="#item of items">

</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键盘插件提供的键盘事件。

export class MyClass{

constructor(keyboard: Keyboard){

this.keyboard = keyboard;

}

实例方法

isOpen()

检查键盘是否打开，返回一个boolean
onClose(callback)

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

关闭键盘

List

实例方法

`enableSlidingItems(shouldEnable)`

是否开启滑动。

closeSlidingItems()

关闭滑动作

LocalStorage

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

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

import {Page, Storage, LocalStorage} from ‘ionic-angular‘;

@Page({

});

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。

<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的滑出和收回。

Close Menu

</button>

<ion-icon name=‘menu‘></ion-icon>

</button>

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

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

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

MenuClose

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

MenuToggle

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

Modals

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

使用方法

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是一个回调函数。

例子

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=http://www.mamicode.com/>{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

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

使用方法

import {GettingStartedPage} from ‘getting-started‘;

@App({

})

class MyApp {

constructor(){

this.rootPage = GettingStartedPage;

}

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

注入NavController

class MyComponent {

constructor(nav: NavController) {

this.nav = nav;

}

页面展示

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

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

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

生命周期

@Page({

})

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的历史记录和切换动画。

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等

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)`

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

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用来在页面中传递数据。

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

返回上一页的指令

<ion-content>

</ion-content>

NavPush

跳转到一个新的页面。

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

Option

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

输入

checked boolean

是否被选中
value any

该选项的值

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

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>中，并且至少有两个。

使用方法

<ion-item>

<ion-label>Radio Label</ion-label>

<ion-radio value=http://www.mamicode.com/"radio-value"></ion-radio>

</ion-item>

输出事件

select

选择的时候执行的事件。

RadioGroup

<ion-list radio-group [(ngModel)]="autoManufacturers">

<ion-list-header>

Auto Manufacturers

</ion-list-header>

<ion-item>

<ion-label>Cord</ion-label>

<ion-radio value=http://www.mamicode.com/"cord"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Duesenberg</ion-label>

<ion-radio value=http://www.mamicode.com/"duesenberg"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Hudson</ion-label>

<ion-radio value=http://www.mamicode.com/"hudson"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Packard</ion-label>

<ion-radio value=http://www.mamicode.com/"packard"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Studebaker</ion-label>

<ion-radio value=http://www.mamicode.com/"studebaker"></ion-radio>

</ion-item>

</ion-list>

输出事件

change

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

Refresher

用来实现下拉刷新功能。

使用方法

<ion-content>

<ion-refresher (refresh)="doRefresh($event)">

<ion-refresher-content></ion-refresher-content>

</ion-refresher>

</ion-content>

@Page({...})

export class NewsFeedPage {

doRefresh(refresher) {

console.log(‘Begin async operation‘, refresher);

setTimeout(() => {

console.log(‘Async operation has ended‘);

refresher.complete();

}, 2000);

}

Refresher Content

<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

<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

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

使用方法

<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是一组按钮，允许用户和一组按钮进行交互，类似于标签页的功能。

使用方法

<ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger>

<ion-segment-button value=http://www.mamicode.com/"friends">

Friends

</ion-segment-button>

<ion-segment-button value=http://www.mamicode.com/"enemies">

Enemies

</ion-segment-button>

</ion-segment>

输出事件

change

当按钮改变时触发事件。

Select

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

单选

<ion-item>

<ion-label>Gender</ion-label>

<ion-select [(ngModel)]="gender">

<ion-option value=http://www.mamicode.com/"f" checked="true">Female</ion-option>

<ion-option value=http://www.mamicode.com/"m">Male</ion-option>

</ion-select>

</ion-item>

多选

<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

<ion-select okText="Okay" cancelText="Dismiss">

...

</ion-select>

Alert选项

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

<ion-select [alertOptions]="alertOptions">

...

</ion-select>

this.alertOptions = {

title: ‘Pizza Toppings‘,

subTitle: ‘Select your toppings‘

};

输入

multiple boolean

是否可以接受多个选项
disabled boolean

组件是否被禁用

输出事件

change

当选项改变时触发
cancel

取消时触发

ShowWhen

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

I am visible on Android!

</div>

I am visible on iOS!

</div>

I am visible on Android and iOS!

</div>

I am visible on Portrait!

</div>

I am visible on Landscape!

</div>

Slides

Slides是基于Swiper.js实现的。

@Page({

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

<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查询。

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]值来加载该组件。

<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

<ion-item>

<ion-label stacked>Message</ion-label>

<ion-textarea [(ngModel)]="msg"></ion-textarea>

</ion-item>

Toggle

<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是一条在上面或者在下面的通用栏。

使用方法

<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

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

使用方法

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文档整理

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Ionic2文档整理