Ionic 4是第一個(gè)完全擁抱Web API（如自定義元素秃臣、CSS變量和影子DOM）的版本。它的核心具有框架無關(guān)性哪工，它是一個(gè)為Web開發(fā)人員而生的UI庫(kù)奥此，無論他們使用什么樣的前端工具或框架。
Ionic 4最大的變化之一就是為每個(gè)組件使用了Web組件雁比，這樣可以更好地基于框架核心開發(fā)新特性稚虎。
ionic4更好的擁抱了angular，和pc端開發(fā)已基本無區(qū)別偎捎，v3版本開發(fā)時(shí)路由極其痛苦蠢终，相信大家都體會(huì)到了
歡迎star ionic4實(shí)現(xiàn)elm
目錄遷移
首先使用v4版本創(chuàng)建一個(gè)全新同名工程:ionic start myApp tabs --type=angular
v3和v4的目錄結(jié)構(gòu)官方變化非洲，如果想快速遷移，可以保持之前的pages的結(jié)構(gòu)不變：
配置和代理
v4同angular配置保持一致蜕径，可以在angular.json中進(jìn)行一系列配置两踏，代理則通過proxy.config.json配置
依賴變更
ionic-angular 引入變?yōu)榱薂ionic/angular，可以全局替換
rxjs變化主要是由于rxjs5.5引入了Pipeable Operator兜喻，參考這里rxjs
css
和angular保持一致梦染，采用style或styleUrls方式引入，不再使用page-**{}方式
全局樣式：可以將v3中全局樣式放置到global.scss中朴皆，也可以創(chuàng)建一個(gè)新的scss引入到angular.json中
生命周期鉤子
一些 Ionic 生命周期事件等同于 Angular 生命周期 hooks帕识。 例如，ionViewDidLoad() 扮演與 Angular OnInit 生命周期 hook（ngOnInit()）相同的角色遂铡。 在這種情況下肮疗，請(qǐng)使用 Angular 生命周期 hooks。
組件變更
Loading扒接，Toast 或 Alert 等組件在v3是同步創(chuàng)建的伪货。 在 Ionic v4 中，這些組件都是基于 promise異步創(chuàng)建的钾怔。
// v3
showAlert() {
const alert = this.alertCtrl.create({
message: "Hello There",
subHeader: "I'm a subheader"
});
alert.present();
}
// v4
showAlert() {
this.alertCtrl.create({
message: "Hello There",
subHeader: "I'm a subheader"
}).then(alert => alert.present());
}
// Or using async/await
async showAlert() {
const alert = await this.alertCtrl.create({
message: "Hello There",
subHeader: "I'm a subheader"
});
await alert.present();
}
導(dǎo)航
令人激動(dòng)的變更碱呼，終于和angular導(dǎo)航保持一致了，媽媽再也不用擔(dān)心將工程從pc遷移到ionic了宗侦，有angula基礎(chǔ)的童鞋應(yīng)該不會(huì)陌生愚臀，詳細(xì)使用參考angular官方路由文檔
懶加載
使用angular的loadChildren路由懶加載方式
// v3 home.page.ts
@IonicPage({
segment: 'home'
})
@Component({ ... })
export class HomePage {}
// home.module.ts
@NgModule({
declarations: [HomePage],
imports: [IonicPageModule.forChild(HomePage)]
})
export class HomePageModule {}
// v4 home.module.ts
@NgModule({
imports: [
IonicModule,
RouterModule.forChild([{ path: '', component: HomePage }])
],
declarations: [HomePage]
})
export class HomePageModule {}
// app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
RouterModule.forRoot([
{ path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
{ path: '', redirectTo: 'home', pathMatch: 'full' }
])
],
bootstrap: [AppComponent]
})
export class AppModule {}
