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

六、其他

待总结