一、包名变更

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

六、其他

待总结

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐