# ionic2 **Repository Path**: fell/ionic2 ## Basic Information - **Project Name**: ionic2 - **Description**: ionic说明翻译 - **Primary Language**: Java - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2017-06-16 - **Last Updated**: 2020-12-20 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ionic2.0@beta版本文档整理 *本文档不是英文文档的完全翻译，是个人的阅读笔记。如果阅读后有不明白或者不懂，[请移步英文版阅读](http://ionicframework.com/docs/v2/api/)。如果本文有错误，请在本页末尾留言或者提交[Issues](https://github.com/Raineye/ionic2/issues)。* *您可以点击小标题跳转到相应的ionic2英文文档。* ## 前言声明：本仓库中的例子程序使用了ionic官方的例子[ionic-preview-app](https://github.com/driftyco/ionic-preview-app)。运行： - `git clone git@github.com:Raineye/ionic2.git` - `cd ionic-preview-app` - `npm install` - `ionic serve` ## [ActionSheet](http://ionicframework.com/docs/v2/api/components/action-sheet/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)。 ```TypeScript 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`|显示的按钮的数组| **按钮的属性** | 属性名称 | 类型 |描述 | | ------------- |:------------- |:------------- | | 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](http://ionicframework.com/docs/v2/api/components/alert/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: [ { 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](http://ionicframework.com/docs/v2/api/decorators/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](http://ionicframework.com/docs/v2/components/#badges) Badges是一种小部件，通常用于数值显示。 ``` Followers 260k ``` Badges也可以给与颜色属性` ` ## [Buttons](http://ionicframework.com/docs/v2/api/components/button/Button/) Button是ionic中的简单句子，可以显示文本、图标或者都显示。 ### 属性 - outline 带有边框的透明按钮 - clear 不带边框的透明按钮 - round 大圆角的按钮 - block 一个填充其父容器的小圆角按钮 - full 填充其父容器的直角按钮 - small 一个小尺寸按钮 - large 一个大尺寸按钮 - disabled 一个不能点击的按钮 - fab 一个浮动的按钮 - fab-left/fab-right/fab-center/fab-top/fab-bottom 控制浮动按钮的位置 - color 动态设置按钮的颜色属性。 - start\end 在``中的位置控制 ### Icon Buttons ``` ``` ## [Cards](http://ionicframework.com/docs/v2/components/#cards) Cards是一个css组件 ### Card的组成就像一个普通的页面一样，cards拥有一个头部和内容。 ```

Header

The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.

``` ## [Checkbox](http://ionicframework.com/docs/v2/api/components/checkbox/Checkbox/) 复选框拥有一个布尔值来标记自己是否被选中，使用`checked`可以来默认选中复选框，使用`disabled`来禁用该复选框。 ```

Daenerys Targaryen

Arya Stark

Jon Snow

``` ### 特性 - checked `boolean` 复选框是否被选中 - disabled `boolean` 复选框是否禁用 ### 事件 - change 当复选框状态变化时触发 ## [Config](http://ionicframework.com/docs/v2/api/config/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](http://ionicframework.com/docs/v2/api/components/content/Content/) Content组件提供了易于使用的方法来控制滚动，同时可以和其他组件配合实现下拉刷新和上拉加载的功能。 ### 实例方法 #### `onScrollElementTransitionEnd()` #### `scrollTo(x,y,duration,tolerance)` 滚动到具体的坐标 - x `number` x轴距离 - y `number` y轴距离 - duration `number` 滚动动画的持续时间 - tolerance `TODO` 此函数执行完毕后，返回一个`Promise` #### `scrollToTop()` 滚动到顶部，执行完毕后返回一个`Promise` #### `getContentDimensions()` 获取content的尺寸 ## [Events](http://ionicframework.com/docs/v2/api/util/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); }); ``` ### 实例方法 #### `subscribe(topic,handler)` 订阅某个事件，当有该事件被发布时，执行handler。 - topic `string` 订阅的主题 - handler `function` #### `unsubscribe(topic, handler)` 取消订阅某个主题。handler不再接受该主题发布的事件。如果handler成功移除，改函数返回`true` #### `publish(topic,eventData) 将事件发布到给定的主题 ## [Grid](http://ionicframework.com/docs/v2/components/#grid) ionic基于flexbox制作了一套网格框架。 ``` This column will take 10% of space ``` 列的百分比属性： - 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](http://ionicframework.com/docs/v2/api/components/show-hide-when/HideWhen/) HideWhen用来设置某个平台或者某个屏幕方向时显示的元素。 ```

I am hidden on Android!

I am hidden on iOS!

I am hidden on Android and iOS!

I am hidden on Portrait!

I am hidden on Landscape!

``` ## [Icon](http://ionicframework.com/docs/v2/api/components/icon/Icon/) Icon会自动识别平台并使用该平台的设计Icon。 ```

``` ### 属性 - name `string` - ios `string` - md `string` - isActive `bool` 设置该图标是否是活跃的图标。一般会用在tabbar中来将选中的tab图标置为活跃。 ## [Id](http://ionicframework.com/docs/v2/api/components/app/Id/) Id是一个应用程序中元素的唯一标识，可以通过它来获取到元素从而进行访问。 ### 使用 ``` ``` ``` constructor(app: IonicApp) { this.app = app } ngAfterViewInit() { var checkbox = this.app.getComponent("myCheckbox"); if (checkbox.checked) { console.log('checkbox is checked'); } } ``` 通过IonicApp服务来访问元素。注意：不建议使用Id，因为不能保证注册组件所在的页面是否已经被销毁或者离开当前视图。 ## [InfiniteScroll](http://ionicframework.com/docs/v2/api/components/infinite-scroll/InfiniteScroll/) 当用户滚动到页面底部时，可以通过InfiniteScroll执行一个动作。可以用来实现上拉加载。 ### 使用方法 ```

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

``` ### 实例方法 #### `state()` #### `complete()` 调用该方法来表示加载已经完成。 #### `enable(shouldEnable)` 调用该方法可以设置InfiniteScroll是否处于激活状态。当shouldEnable是`false`时，InfiniteScroll将被禁用。 - shouldEnable `boolean` ### 属性 - threshold `string` 设置滚动触发的阙值。例如距离底部还有10%的时候触发事件。 ### 输出事件 - infinite ## [Input](http://ionicframework.com/docs/v2/api/components/input/Input/) `ion-input`拥有很多文本类型，例如：`text` `password` `email` `number` `search` `tel` 和 `url`。 ## [IonicApp](http://ionicframework.com/docs/v2/api/components/app/IonicApp/) ### 实例方法 #### `setTitle(val)` 设置网页标题。 #### `isProd()` 返回是否生产模式。默认为`false`。可以在`@App`中的`config`中配置。 #### `isScrolling()` 返回布尔值。 #### `getComponent()` 获取给定键值的组件。 ## [Item](http://ionicframework.com/docs/v2/api/components/item/Item/) Item的使用有三种方法： - 使用``来创建一个不可点击文本。 - 使用 ` ``` ## [Keyboard](http://ionicframework.com/docs/v2/api/util/Keyboard/) Keyboard允许你使用ionic键盘插件提供的键盘事件。 ``` export class MyClass{ constructor(keyboard: Keyboard){ this.keyboard = keyboard; } } ``` ### 实例方法 - `isOpen()` 检查键盘是否打开，返回一个boolean - `onClose(callback)` 当键盘被关闭时回调一个callback 返回callback - `close()` 关闭键盘 ## [List](http://ionicframework.com/docs/v2/api/components/list/List/) ### 实例方法 #### `enableSlidingItems(shouldEnable)` 是否开启滑动。 #### closeSlidingItems() 关闭滑动作 ## [LocalStorage](http://ionicframework.com/docs/v2/api/platform/storage/LocalStorage/) LocalStorage的储存引擎使用浏览器的本地储存系统储存键值对。它只应用于临时储存的数据。为保证长期的储存，请使用sqlstorage引擎将数据储存在一个文件。 ``` import {Page, Storage, LocalStorage} from 'ionic-angular'; @Page({ template: `` }); 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](http://ionicframework.com/docs/v2/api/components/menu/Menu/) Menu是一个侧滑菜单。 ### 使用方法 Menu必须指定一个参考的`content`。 ```

...

``` 默认情况下菜单在左边滑动，你也可以使用`side`属性来让它从右边滑出。 ``` ... ``` 如果你只是想简单的使用menu那么你可以使用`menuToggle` `menuClose`来控制menu的滑出和收回。 ``` ``` 如果你有多个menu从同一边滑出，你可以通过id来控制。 ``` ...

...

``` ``` 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](http://ionicframework.com/docs/v2/api/components/menu/MenuClose/) 该指令可以放在任何按钮，自动的关闭打开的菜单。 ## [MenuToggle](http://ionicframework.com/docs/v2/api/components/menu/MenuToggle/) 该指令可以放在任何按钮，自动的开关menu。 ## [Modals](http://ionicframework.com/docs/v2/api/components/modal/Modal/) 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=>{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({ template: `` }) class MyApp { constructor(){ this.rootPage = GettingStartedPage; } } ``` ### Back navigation `swipeBackEnabled`用来控制滑动返回。 ``` ``` 下图是一个App的架构 +-------+ | App | +---+---+ | +------------+-------------+ | Ionic Nav Controller | +------------+-------------+ | | 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 ``` class MyComponent { constructor(nav: NavController) { this.nav = nav; } } ``` ### 页面展示页面创建可以使用`@Page`装饰器。当页面被添加到navigation栈的时候，页面就被展示了，使用`push()`方法。页面销毁时将从navigation栈中移除（使用`pop()`或者`setRoot()`）。 ### 生命周期 ``` @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的历史记录和切换动画。 ``` 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 返回上一页的指令 ```

go back

``` ## NavPush 跳转到一个新的页面。 ``` ``` ## Option `ion-option`是`ion-select`的子组件。 ### 输入 - checked `boolean` 是否被选中 - value `any` 该选项的值 ## Page `@Page`装饰器包含`IONIC_DIRECTIVE`中所有的组件和指令以及Angular中的`CORS_DIRECTIVES`和 `FORM_DIRECTIVES`。所以你只需要将你自定义的指令和组件依赖进去就好。 ### 使用方法 ``` @Page({ template: ` I am a page! ` }) class MyPage {} ``` 此时`@Page`已经帮你把那些指令注入进去了，所以你无需再次增加`directives`数组。如果你需要自定义一个组件，而且需要依赖某个指令时，你需要手动加入。 ``` import {IONIC_DIRECTIVES} from 'ionic-angular'; @Component({ selector: 'my-component' template: `

`, directives: [IONIC_DIRECTIVES] }) class MyCustomCheckbox {} ``` 或者你可以指定明确的指令来获取，并单独添加它。 ``` 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 ``` 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 单选按钮必须包含在``中，并且至少有两个。 ### 使用方法 ```

Radio Label

``` ### 输出事件 - select 选择的时候执行的事件。 ## RadioGroup ```

Auto Manufacturers

Cord