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软件包名称不使用@符号。我们可以从以下语法中了解离子3和离子4的语法比较。

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