Ionic 4和Ionic 3之间的区别

在本节中, 我们将解释Ionic 4和ionic 3之间的主要区别。在Ionic 3发行之后, Ionic框架团队发行了Ionic 4版本。 Ionic的新版本在项目结构, 性能, 与多个框架（例如Angular, React.js和Vue.js等）的兼容性, 新文档和许多其他改进方面进行了重大更改。现在, 让我们一一比较。

套件名称变更

在Ionic 4中, 程序包名称以@符号开头, 例如@ ionic / angular。而Ionic 3软件包名称不使用@符号。我们可以从以下语法中了解Ionic3和Ionic4的语法比较。

In Ionic 3: npm install ionic-angular
In Ionic 4: npm install @ionic/angular

如果要将应用程序从Ionic 3迁移到Ionic 4, 则需要将导入内容从ionic-angular更新为@ ionic / angular。

项目结构

Ionic 4和Ionic 3应用之间的主要变化是整个项目的布局和结构。在Ionic 3中, 它具有关于如何设置应用程序以及文件夹结构应如何的自定义约定。而在Ionic 4中, 应用程序结构遵循建议的每个受支持框架的设置。

例如, 如果我们使用Angular构建应用程序, 则项目结构将完全是Angular CLI应用程序结构。我们可以在下图中看到项目结构的比较。

RxJS的变化

Ionic 4使用RxJS的最新版本6。它更改了运算符和核心RxJS函数的许多导入路径。

Web组件

Ionic 4已完全重建为使用Web API, 并且每个组件都打包为Web组件。 Web组件是Web平台API的集合, 这些API允许Ionic框架创建自定义的, 可重复使用的, 封装的HTML标签, 以用于网页和Web应用程序。

由于Ionic 4的每个组件都是一个Web组件, 因此他们创建了一个名为Stencil的工具并将其开源。模具是一个Web组件编译器, 用于构建快速, 可重用的UI组件和Progressive Web Apps。

生命周期事件

我们已删除了在Ionic 3中使用过的生命周期事件, 例如ionViewDidLoad, ionViewCanLeave和ionViewCanEnter, 并在Ionic 4中使用了它们的适当替代方法。使用Ionic 4, 我们可以利用Angular提供的典型事件。

有关更多信息, 请单击路由器出口文档。

叠加组件

在Ionic 3中, 叠加组件（例如加载, 吐司和警报）是同步创建的。但是, 在Ionic 4中, 它们是异步创建的。现在, API成为基于Promise的了。例如,

在Ionic 3中, 我们如下创建了警报消息。

showAlert() {
  const alert = this.alertCtrl.create({
    message: "Hello", subHeader: "I'm an alert message"
  });

  alert.present();
}

在Ionic 4中, 使用了promise。我们可以如下创建警报消息。

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

// Or using async/await

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

  await alert.present();
}

导航

在Ionic 4中, 导航已进行了许多更改。例如, v4可以与官方的Angular Router集成, 而不必使用Ionic自己的navController。它为整个应用程序提供了更一致的路由体验。 Angular Router是Angular应用程序中最重要的库。如果不可用, 则该应用程序无法在重新加载浏览器时保持其导航状态。因此, 使用Ionic框架和Angular Router, 你可以创建可链接且具有丰富动画的丰富应用程序。

Ionic版本3导航基于简单堆栈, 其中新页面被推入堆栈顶部。而且, 当我们想向后导航时, 只需弹出最后一页。

传统网站使用线性历史记录, 用户可以在其中导航到所需页面, 并且可以按“上一步”按钮向后导航。但是, 在Ionic Framework中, 应用程序可以通过允许并行导航来实现这一目标。这意味着它具有多个导航堆栈, 并且可以随时交换它们。

延迟加载

如我们先前所知, 在Ionic 4中导航已更改, 延迟加载的机制也已更改。我们可以从下面的代码片段中了解延迟加载设置的工作方式。

在Ionic 3中

// home.page.ts
@IonicPage({
  segment: 'home'
})
@Component({ ... })
export class HomePage {}

// home.module.ts
@NgModule({
  declarations: [HomePage], imports: [IonicPageModule.forChild(HomePage)]
})
export class HomePageModule {}

在Ionic 4中

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