ionic2文档整理
&本文档不是英文文档的完全翻译，是个人的阅读笔记。如果阅读后有不明白或者不懂，
如果本文有错误，请在本页末尾留言或者提交
您可以点击小标题跳转到相应的ionic2英文文档。
如果本文帮助到了你，
，帮作者点个star支持一下。
声明：本仓库中的例子程序使用了ionic官方的例子
git clone :Raineye/ionic2.git
cd ionic-preview-app
npm install
ionic serve
ActionSheet是一个对话框，让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互（点击背景会执行
的事件）。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。
ActionSheet会从一个
数组创建它的按钮选项。每一个按钮都拥有一些属性，例如
等等。如果
时，ActionSheet将不会消失。ActionSheet还可以选择有一个标题和副标题。
如果有一个button的
那么这个按钮不管位于按钮数组的哪个位置它都会位于底部。ionic官方建议
destructive
类型的按钮最好位于数组的第一个位置。另外，如果ActionSheet是由于点击背景而被取消的，那么它将会执行和
类型的按钮点击一样的事件。
注意：如果有两个
类型的按钮，那么最后一个
类型的按钮会覆盖掉前面所有的
类型的按钮。
在创建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)
ActionSheet的标题
ActionSheet的副标题
自定义样式的css类
enableBackdropDismiss
用户点击背景是否关闭ActionSheet
array&any&
显示的按钮的数组
按钮的属性
按钮上显示的文字
按钮上显示的图标
点击后执行的函数
如何显示按钮，
destructive
。如果没有设置此选项，那么将显示默认的按钮。
setTitle(title)
设置ActionSheet的标题
setSubTitle(subTitle)
设置ActionSheet的子标题
addButton(button)
ActionSheet的按钮。
Alert是一个对话框，可以向用户提供信息或者收集用户输入的信息。同样用户必须点击某个按钮才能销毁这个对话框。
和ActionSheet十分相似的是，点击
的按钮和点击背景所触发的事件是一样的。
constructor(nav: NavController) {
this.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',
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!
// invalid login
this.nav.present(alert);}
creat(opts)
Alert显示的信息
Alert显示的输入框数组
enableBackdropDismiss
点击背景是否销毁Alert
input的类型，例如：text、tel、number等等
placeHolder
input的占位符，未输入时的提示信息。
checkbox的值
checkbox显示的文字
input的标识
Button的选项
setTitle(title)
setSubTitle(subTitle)
setMessage(message)
addButton(button)
setCssClass(cssClass)
添加css class 到alert的外层。
app是一个ionic的装饰器，它可以启动应用，是整个ionic应用的主入口。通过一系列的参数作为应用程序的全局配置变量。
可以接受一个模板属性或者一个模板地址。
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}
app的配置信息
激活Angular的生产模式，在框架内关闭断言和其他检查。默认是
templateUrl
Badges是一种小部件，通常用于数值显示。
&ion-item&
&ion-icon name="logo-twitter" item-left&&/ion-icon&
&ion-badge item-right&260k&/ion-badge&&/ion-item&
Badges也可以给与颜色属性
&ion-badge secondary&&/ion-badge&
Button是ionic中的简单句子，可以显示文本、图标或者都显示。
带有边框的透明按钮
不带边框的透明按钮
大圆角的按钮
一个填充其父容器的小圆角按钮
填充其父容器的直角按钮
一个小尺寸按钮
一个大尺寸按钮
一个不能点击的按钮
一个浮动的按钮
fab-left/fab-right/fab-center/fab-top/fab-bottom
控制浮动按钮的位置
动态设置按钮的颜色属性。
&ion-navbar&
中的位置控制
Icon Buttons
&!-- 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是一个css组件
Card的组成
就像一个普通的页面一样，cards拥有一个头部和内容。
&ion-card&
&ion-card-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&
复选框拥有一个布尔值来标记自己是否被选中，使用
可以来默认选中复选框，使用
来禁用该复选框。
&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&
复选框是否被选中
复选框是否禁用
当复选框状态变化时触发
用来配置整个应用程序。
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)
config的键
fallbackValue
getBoolean(key)
set(platform,key,value)
“ios”或者”android”
Content组件提供了易于使用的方法来控制滚动，同时可以和其他组件配合实现下拉刷新和上拉加载的功能。
onScrollElementTransitionEnd()
scrollTo(x,y,duration,tolerance)
滚动到具体的坐标
滚动动画的持续时间
此函数执行完毕后，返回一个
scrollToTop()
滚动到顶部，执行完毕后返回一个
getContentDimensions()
获取content的尺寸
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);});
subscribe(topic,handler)
订阅某个事件，当有该事件被发布时，执行handler。
订阅的主题
unsubscribe(topic, handler)
取消订阅某个主题。handler不再接受该主题发布的事件。
如果handler成功移除，改函数返回
`publish(topic,eventData)
将事件发布到给定的主题
ionic基于flexbox制作了一套网格框架。
&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%
属性来设置列偏移（例如：
HideWhen用来设置某个平台或者某个屏幕方向时显示的元素。
&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 --&&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&
设置该图标是否是活跃的图标。一般会用在tabbar中来将选中的tab图标置为活跃。
Id是一个应用程序中元素的唯一标识，可以通过它来获取到元素从而进行访问。
&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执行一个动作。
可以用来实现上拉加载。
&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');
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&
complete()
调用该方法来表示加载已经完成。
enable(shouldEnable)
调用该方法可以设置InfiniteScroll是否处于激活状态。当shouldEnable是
时，InfiniteScroll将被禁用。
shouldEnable
设置滚动触发的阙值。例如距离底部还有10%的时候触发事件。
拥有很多文本类型，例如：
setTitle(val)
设置网页标题。
返回是否生产模式。默认为
isScrolling()
返回布尔值。
getComponent()
获取给定键值的组件。
Item的使用有三种方法：
&ion-item&
来创建一个不可点击文本。
&button ion-item&
。通常这个元素会有一个(click)处理程序
&a ion-item&
当项目需要包含一个链接。
创建一个可滑动的Item。
&ion-list&
&ion-item-sliding *ngFor="#item of items"&
&button ion-item (click)="itemTapped(item)"&
&ion-item-options&
&button (click)="favorite(item)"&Favorite&/button&
&button (click)="share(item)"&Share&/button&
&/ion-item-options&
&/ion-item-sliding&&/ion-list&
Keyboard允许你使用ionic键盘插件提供的键盘事件。
export class MyClass{ constructor(keyboard: Keyboard){
this.keyboard = }}
检查键盘是否打开，返回一个boolean
onClose(callback)
当键盘被关闭时回调一个callback返回callback
enableSlidingItems(shouldEnable)
是否开启滑动。
closeSlidingItems()
关闭滑动作
LocalStorage的储存引擎使用浏览器的本地储存系统储存键值对。
它只应用于临时储存的数据。为保证长期的储存，请使用sqlstorage引擎将数据储存在一个文件。
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); }}
通过键名来访问LocalStorage中储存的值。
set(key,value)
通过键值对储存到LocalStorage
remove(key)
删除LocalStorage中储存的键值对
Menu是一个侧滑菜单。
Menu必须指定一个参考的
&ion-menu [content]="mycontent"&
&ion-content&
&ion-list&
&/ion-list&
&/ion-content&&/ion-menu&&ion-nav #mycontent [root]="rootPage"&&/ion-nav&
默认情况下菜单在左边滑动，你也可以使用
属性来让它从右边滑出。
&ion-menu side="right" [content]="mycontent"&...&/ion-menu&
如果你只是想简单的使用menu那么你可以使用
menuToggle
来控制menu的滑出和收回。
&button ion-item menuClose="leftMenu" detail-none&
Close Menu&/button&
&button menuToggle&
&ion-icon name='menu'&&/ion-icon&
如果你有多个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 Types
menu可以设置显示的类型。
overlay是传统的MD设计
reveal是传统的ios设计
默认情况下，它们将自动使用当前平台的类型。
注：原文中还提到了一个
，我试过后发现和
是一样的，而且文章中也没有对
进行过多的解释。
打开菜单。返回一个
,当菜单被完全打开时，你可以执行一个事件。
close(menuId)
如果menuId为空，那么将关闭所有打开的菜单，如果menuId被设置，那么将关闭指定的菜单。返回一个
toggle(menuId)
菜单开关。如果菜单当前关闭，那么将打开，如果菜单当前打开，将被关闭。
enable(menuId)
当你有多个menu的时候，用于启用或禁用menu。当你启用一个menu那么同方向的其他menu将被禁用。返回一个menu实例。
swipeEnable(shouldEnable,menuId)
返回一个布尔值来表示menu是否处于打开状态
返回一个布尔值来表示menu是否被启用
get(menuId)
返回一个menu实例，如果menuId的menu没有找到，那么将会返回
getMenus()
返回menu实例数组
该指令可以放在任何按钮，自动的关闭打开的菜单。
该指令可以放在任何按钮，自动的开关menu。
Modals是一个当前页面上的内容窗口。通常它是用来做选择或者编辑一个项目。
import {Page, Modal, NavController, NavParams} from 'ionic-angular';@Page(...)class HomePage { constructor(nav: NavController) {
this.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
传给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=&{console.log(data)});
templateUrl: './build/pages/modals/basic/modal-content.html'})class ModalsContentPage {
constructor(
public platform: Platform,
public params: NavParams,
public viewCtrl: ViewController
this.character = this.params.get('charNum');
dismiss() {
this.viewCtrl.dismiss({a:1,b:2});
这是一个基本的导航控制器。
import {GettingStartedPage} from 'getting-started';@App({
template: `&ion-nav [root]="rootPage"&&/ion-nav&`})class MyApp {
constructor(){
this.rootPage = GettingStartedP
Back navigation
swipeBackEnabled
用来控制滑动返回。
&ion-nav swipeBackEnabled="false" [root]="rootPage"&&/ion-nav&
下图是一个App的架构
+------------+-------------+
Ionic Nav Controller
+------------+-------------+
+--------------------+
+--------------------+ |
+--------------------+ | |
+--------------------+
| | Header
|&-----------------|
+--------------------+ | |
+--------------------+
| Username:
| Password:
only content
|&-----------------|
| +------------------|-+ |
| | Footer
| +------------------|-+
+--------------------+
+--------------------+
+--------------------+
+--------------------+
+--------------------+
+--------------------+
+--------------------+
+--------------------+
+--------------------+
+--------------------+
当前打开的页面。
swipeBackEnabled
是否开启滑动返回
hideBackButton
是否隐藏回退键。
NavController
注入NavController
class MyComponent {
constructor(nav: NavController) {
this.nav =
页面创建可以使用
当页面被添加到navigation栈的时候，页面就被展示了，使用
页面销毁时将从navigation栈中移除（使用
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栈的根节点
页面的类型
传递到下一个视图的参数
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 =
setPages() {
this.nav.setPages([{
page: Info
page: List,
params: {tags: 'css'}
page: Detail,
params: {id: 325}
animate: true
页面类型和参数组成的数组
push(page,params,opts)
页面的类型
传递到下一个视图的参数
present(enteringView,opts)
添加组件到navigation栈中，例如：
ActionSheet
class MyClass{
constructor(nav: NavController) {
this.nav =
presentModal() {
let modal = Modal.create(ProfilePage);
this.nav.present(modal);
enteringView
ViewController
组件的控制器
insert(insertIndex,page,params,opts)
插入一个视图到navigation栈。
insertIndex
插入的索引
页面的类型
传递到下一个视图的参数
insertPages(insertIndex,insertPages,opts)
insertIndex
插入的索引
insertPages
页面类型和参数组成的数组
如果你想后退，那么可以调用该方法。
class SecondView{
constructor(nav:NavController){
this.nav =
this.nav.pop();
popToRoot(opts)
直接跳转到根导航，不管在navigite栈中有多少视图。
popTo(view,opts)
将当前视图到该视图的历史记录弹出，并跳转到指定视图。
ViewController
remove(startIndex,removeCount,opts)
删除栈里指定索引段的元素。
startIndex
从栈中删除页面的起始索引，默认为最后一页的索引
removeCount
从栈中删除多少个页面，默认为1
canSwipeBack()
返回一个布尔值，来表示当前是否支持滑动返回
canGoBack()
返回一个布尔值，来表示是否还有可返回的页面
getByIndex(index)
返回指定索引的组件
getActive()
返回当前活动页面的视图控制器
isActive(view)
返回一个布尔值，来表示该视图是否是当前活动页面。
getPrevious(view)
返回指定页面的视图控制器
返回当前栈中第一个的视图控制器
返回当前栈中最后一个的视图控制器
indexOf(view)
返回某个视图在栈中的索引
返回栈的长度。
NavController
类似于在Ionic V1版本中的
$stateParams
用来在页面中传递数据。
export class MyClass{ constructor(params: NavParams){
this.params =
// userParams is an object we have in our nav-parameters
this.params.get('userParams'); }}
get(parameter)
是数据中键值对中的键名。
返回上一页的指令
&ion-content& &div block button nav-pop&go back&/div&&/ion-content&
跳转到一个新的页面。
&button [navPush]="pushPage" [navParams]="params"&&/button&
ion-option
ion-select
的子组件。
是否被选中
该选项的值
装饰器包含
IONIC_DIRECTIVE
中所有的组件和指令以及Angular中的
CORS_DIRECTIVES
FORM_DIRECTIVES
。所以你只需要将你自定义的指令和组件依赖进去就好。
template: `
&ion-content&
I am a page!
&/ion-content&
`})class MyPage {}
已经帮你把那些指令注入进去了，所以你无需再次增加
directives
如果你需要自定义一个组件，而且需要依赖某个指令时，你需要手动加入。
import {IONIC_DIRECTIVES} from 'ionic-angular';@Component({
selector: 'my-component'
template: `&div class="my-style"&
&ion-checkbox&&/ion-checkbox&
directives: [IONIC_DIRECTIVES]})class MyCustomCheckbox {}
或者你可以指定明确的指令来获取，并单独添加它。
import {Checkbox, Icon} from 'ionic-angular'@Component({
directives: [Checkbox, Icon]})
然而，使用
IONIC_DIRECTIVES
不会产生额外的性能开销，所以，又有什么理由不用它呢。
用来返回当前平台信息。它比ionic V1版本复杂，并不是单纯的返回一个平台信息，还有更多的信息，例如：设备系统，手机还是平板，移动app还是浏览器。
is(platformName)
返回一个布尔值来表示当前平台是否是
platformName
注意：同一个环境下，当platformName不同时，可能不止有一个返回
。例如，Ipad可能返回
的platformName有：
可能有的平台名有：
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)
返回一个包含系统相关信息的对象。
来表示设备是否准备好开始运行程序了。
setDir(dir)
设置文字的排列方向。
ltr代表从左到右的排列rtl代表从右到左的排列
返回文字排列方向。
返回一个布尔值，来表示当前文本是否是从右到左排列的。
setLang(language)
设置语言。
返回当前语言
RadioButton
单选按钮必须包含在
&ion-list radio-group&
中，并且至少有两个。
&ion-item&
&ion-label&Radio Label&/ion-label&
&ion-radio value="radio-value"&&/ion-radio&&/ion-item&
选择的时候执行的事件。
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="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&
在选择改变时执行的事件。
用来实现下拉刷新功能。
&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 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&
获取当前的刷新状态。状态有：
没有下拉，被隐藏状态
用户正在下拉，但还没松手。
cancelling
用户下拉放手后，没有达到触发刷新的距离的状态。
用户下拉的足够远，如果放手就开始更新。
refreshing
正在刷新，等待异步操作结束。
completing
刷新成功的状态。
返回用户开始下拉的Y坐标
返回当前触摸或鼠标事件的Y坐标。
返回开始下拉的Y坐标距离当前触摸或鼠标事件的Y坐标的差值。
0代表还没有到达某个距离，不触发刷新，1代表已经到达某个距离，松手触发刷新。
complete()
当你异步操作完成后，调用这个函数来关闭刷新动画，同时改变了状态。
refreshing
cancelling
用户最小的下拉距离，默认为60
用户下拉的最大距离，超过该距离后，自动进入刷新。默认最大距离为：pullmin+60。
closeDuration
多少毫秒它需要关闭组件，默认为280
snapbackDuration
是否启用该组件
刷新事件。不要忘记在异步事件执行完成后调用
complete()
当用户下拉的时候调用。
当用户开始下拉的时候调用。
&ion-scroll scrollX="true"&&/ion-scroll&&ion-scroll scrollY="true"&&/ion-scroll&&ion-scroll scrollX="true" scrollY="true"&&/ion-scroll&
是否启用x轴滚动
是否启用Y轴滚动
是否启动缩放
设置缩放的最大级别
管理一个搜索栏，可以搜索或筛选项目的显示。
&ion-searchbar
[(ngModel)]="myInput"
[hideCancelButton]="shouldHideCancel"
(input)="onInput($event)"
(cancel)="onCancel($event)"&&/ion-searchbar&
cancelButtonText
设置取消按钮的文本值
hideCancelButton
是否隐藏取消按钮
每次键入字符等待触发事件的时间有多长，默认为250毫秒
placeholder
占位提示符
搜索栏值的双向绑定
当Searchbar中值变化的时候触发
当Searchbar失去焦点的时候触发
当Searchbar得到焦点的时候触发
当取消按钮被点击的时候触发
当清空按钮被点击的时候触发
Segment是一组按钮，允许用户和一组按钮进行交互，类似于标签页的功能。
&ion-segment [(ngModel)]="relationship" (change)="onSegmentChanged($event)" danger&
&ion-segment-button value="friends"&
&/ion-segment-button&
&ion-segment-button value="enemies"&
&/ion-segment-button&&/ion-segment&
当按钮改变时触发事件。
ion-select
和html中的select有点相似。
&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&
&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&
&ion-select okText="Okay" cancelText="Dismiss"&
...&/ion-select&
alertOptions
可以覆盖Alert的配置。例如可以更改标题。
&ion-select [alertOptions]="alertOptions"&
...&/ion-select&this.alertOptions = {
title: 'Pizza Toppings',
subTitle: 'Select your toppings'};
是否可以接受多个选项
组件是否被禁用
当选项改变时触发
取消时触发
用来表示某平台或者某屏幕方向时时显示该元素。
&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是基于Swiper.js实现的。
@Page({ template: `
&ion-slides pager (change)="onSlideChanged($event)" (move)="onSlideMove($event)"&
&ion-slide&
&h3&Thank you for choosing the Awesome App!&/h3&
The number one app for everything awesome.
&/ion-slide&
&ion-slide&
&h3&Using Awesome&/h3&
&div id="list"&
&h5&Just three steps:&/h5&
&li&Be awesome&/li&
&li&Stay awesome&/li&
&li&There is no step 3&/li&
&/ion-slide&
&ion-slide&
&h3&Any questions?&/h3&
&/ion-slide&
&/ion-slides&
是否显示索引点
任何Slider需要配置的参数，可以参考
该组件是否可以缩放
zoomDuration
缩放该组件需要多长时间
最大的缩放
当滑块变化的时候触发
slideChangeStart
当滑块开始更改时触发
当滑块移动时触发
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 underneathstorage.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操作。
从数据库中获取给定的键名所对应的键值。
set(key,value)
从数据库中插入键值对
remove(key)
从数据库中删除键值对。
清空数据库
底部的标签按钮
值来加载该组件。
&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
设置根页面
rootParams
传递数据到该页面
tabBadgeStyle
设置徽章颜色
选中时触发。
select(index)
选中某个索引的选项卡
getByIndex(index)
返回一个和索引匹配的选项卡
getSelected()
返回当前选中的选项卡
selectedIndex
第一次加载时默认选中的选项卡，如果不提供那么默认是0
preloadTabs
是否预加载所有标签
tabbarIcons
这个属性是过时的，请使用TabBarLayout代替，设置图标的位置
tabbarLayout
设置tabbar的布局
icon-right
icon-bottom
title-hide
tabbarPlacement
设置tabbar的位置：
当标签页改变时触发
&ion-item&
&ion-label stacked&Message&/ion-label&
&ion-textarea [(ngModel)]="msg"&&/ion-textarea&&/ion-item&
&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&
切换时触发
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&
设置toolbar的位置，默认是
ViewController
访问当前视图的功能和信息
import {Page, ViewController} from 'ionic-angular';@Page....export class MyPage{ constructor(viewCtrl: ViewController){
this.viewCtrl = viewC }}
componentType()
subscribe()
onDismiss()
enableBack(Check)
检查navigation栈中是否可以返回
查询在当前视图navigation栈中的索引
返回一个布尔值，来表示是否是栈中第一个视图
hasNavbar()
返回一个布尔值，来表示是否拥有navBar
setBackButtonText(backButtonText)
更改后退按钮的文本
showBackButton(Set)
设置当前视图的后退按钮是否可见
TA的最新馆藏[转]&