Ionic的版本報錯總結

一、包名變更

V4 版本的另一個變化是 Ionic 的實際包名。 對於 v4，包名稱現爲 @ionic/angular。將 imports 從 ionic-angular 更新爲 @ionic/angular。

二、生命週期事件

一些 Ionic 生命週期事件等同於 Angular 生命週期 hooks。 例如，ionViewDidLoad() 扮演與 Angular OnInit 生命週期 hook（ngOnInit()）相同的角色。 在這種情況下，請使用 Angular 生命週期 hooks。

三、疊加組件

 在 Ionic v4 中，這些組件都是異步創建的。 因此，API 現在基於 promise。

In v4, promises are used:

showAlert() {
  this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  }).then(alert => alert.present());
}

// 或使用 async/await

async showAlert() {
  const alert = await this.alertCtrl.create({
    message: "Hello There",
    subHeader: "I'm a subheader"
  });

  await alert.present();
}

四、導航

在 v4 中，對導航和路由進行了重大更改。 NavController 和 ion-nav 現已棄用。 

代替 ion-nav 和 NavController，Ionic 建議使用官方 Angular Router 進行路由。

一個關鍵的區別是，Ionic 應用程序不使用 router-outlet 組件，而是使用 ion-router-outlet。 該組件具有與標準 Angular router-outlet 相同的功能，但是包含 transitions。

五、延遲加載

在 v4 中，延遲加載是通過 Angular Router 的 loadChildren 方法完成的：

// 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 {}

六、其他

待總結