Ionic2 beta8后更新的内容

Posted 2020-08-20

移除了@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)">