Ionic 4 与 Ionic 3 的区别

17 Mar 2025 | 4 分钟阅读

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

包名更改

在 Ionic 4 中，包名以 @ 符号开头，例如 @ionic/angular。而 Ionic 3 包名不使用 @ 符号。我们可以从下面的语法中理解 Ionic 3 和 Ionic 4 的语法比较。

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

如果要将应用从 Ionic 3 迁移到 Ionic 4，则需要将 imports 从 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，允许 Ionic 框架创建自定义的、可重用的、封装的 HTML 标签，以在网页和 Web 应用程序中使用。

由于 Ionic 4 的每个组件都是一个 Web 组件，因此他们创建并开源了一个名为 Stencil 的工具。Stencil 是一个 Web 组件编译器，用于构建快速、可重用的 UI 组件和渐进式 Web 应用程序。

生命周期事件

我们在 Ionic 3 中使用的生命周期事件（如 ionViewDidLoad、ionViewCanLeave 和 ionViewCanEnter）已被删除，并且在 Ionic 4 中使用了它们的适当替代方法。使用 Ionic 4，我们能够利用 Angular 提供的典型事件。

有关更多信息，请单击 router-outlet 文档。

覆盖组件

在 Ionic 3 中，覆盖组件（如 loading、toast 和 alert）是同步创建的。但是，在 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 框架中，应用程序可以通过允许并行导航来利用这一点。这意味着它具有多个导航堆栈，并且可以随时交换它们。

延迟加载

正如我们之前所了解的，导航在 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 {}

下一个主题Ionic 编辑器