首页 > 代码库 > Ionic2 beta8后更新的内容

Ionic2 beta8后更新的内容

2024-08-21 13:29:46   219人阅读

移除了@App和@Page,使用@Component

ionicBootstrap是必须的

重命名了应用程序的生命周期

所有事件也被重命名

============================================

变化如下:

Ionic生命周期事件重命名：

  • onPageLoaded 重命名为 ionViewLoaded
  • onPageWillEnter 重命名为 ionViewWillEnter
  • onPageDidEnter 重命名为 ionViewDidEnter
  • onPageWillLeave 重命名为 ionViewWillLeave
  • onPageDidLeave 重命名为 ionViewDidLeave
  • onPageWillUnload 重命名为 ionViewWillUnload
  • onPageDidUnload 重命名为 ionViewDidUnload

 

 

Ionic组件事件重命名：

  • Checkbox
    • change -> ionChange
  • DateTime
    • change -> ionChange
    • cancel -> ionCancel
  • InfiniteScroll
    • infinite -> ionInfinite
  • Menu
    • opening -> ionDrag
    • opened -> ionOpen
    • closed -> ionClose
  • Option
    • select -> ionSelect
  • Picker
    • change -> ionChange
  • RadioButton
    • select -> ionSelect
  • RadioGroup
    • change -> ionChange
  • Refresher
    • refresh -> ionRefresh
    • pulling -> ionPull
    • start -> ionStart
  • Searchbar
    • input -> ionInput
    • blur -> ionBlur
    • focus -> ionFocus
    • cancel -> ionCancel
    • clear -> ionClear
  • Segment
    • change -> ionChange
    • select -> ionSelect
  • Select
    • change -> ionChange
    • cancel -> ionCancel
  • Slides
    • willChange -> ionWillChange
    • didChange -> ionDidChange
    • move -> ionDrag
  • TabButton
    • select -> ionSelect
  • Tab
    • select -> ionSelect
  • Tabs
    • change -> ionChange
  • Toggle
    • change -> ionChange

一、把@Page替换成@Component

//老的写法
import {Page} from‘ionic-angular‘; 
@Page({ })

 

//新的写法
import {Component} from ‘@angular/core‘; @Component({ })

 

二、@App更换为@Component，并且在与你的配置末尾添加ionicBootstrap功能。
//老的写法
import {App, Platform} from ‘ionic-angular‘; @App({   templateUrl: ‘build/app.html‘,   providers: [ConferenceData, UserData],   config: {     tabbarPlacement: ‘bottom‘   } export class MyApp {   }
//新的写法
import {Component} from ‘@angular/core‘; import {ionicBootstrap, Platform} from ‘ionic-angular‘; @Component({   templateUrl: ‘build/app.html‘, }) export class MyApp { } ionicBootstrap(MyApp, [ConferenceData, UserData], {   tabbarPlacement: ‘bottom‘ });

三、重全名IonicApp为App:

//老的写法
import {IonicApp} from ‘ionic-angular‘; constructor(   private app: IonicApp ) {
//新的写法
import {App} from ‘ionic-angular‘; constructor(   private app: IonicApp ) {
四、重命名了所有应用程序生命周期
//老的写法
onPageDidEnter() {      console.log("Entered page!"); }
//新的写法
ionViewDidEnter() {      console.log("Entered page!"); }

 

五、重命名Ionic事件

//老的写法
<ion-slides (slideChangeStart)="onSlideChangeStart($event)">
//新的写法
<ion-slides (ionWillChange)="onSlideChangeStart($event)">

 

Ionic2 beta8后更新的内容


联系
我们