Ionic 4 路由升级/迁移

Question

使用Ionic 4 with Angular 时。您可以通过 NavController 使用 Angular 路由器而不是 Ionic 路由。我开始开发 Ionic 3 应用程序有一段时间了。现在我想迁移我的项目以改用 Ionic 4。如何正确迁移到 Angular 路由？

Answer 1

这是将您的 Ionic 3 应用程序迁移到 Ionic/Angular v4 的方法，适用于处于相同情况的任何人。

首先使用 Ionic CLI 4 生成一个全新的 Ionic/Angular v4 应用程序。这样，您无需手动创建新结构：

ionic start newproject blank --type=angular

将文件从 Ionic 3 项目移动到 Ionic 4 项目

将文件从 Ionic 3 应用程序中的 src 文件夹移动到 Ionic 4 项目中的 src/app 文件夹。

更新导入

将 ionic-angular 的导入更改为 @ionic/angular 的导入。

更新路由

Ionic/Angular v4 使用 Angular 路由器进行路由，而 Ionic 3 使用带有 NavController 的 Push/Pop 堆栈导航

首先，您需要在src/app/app-routing.module.ts 文件中创建您的应用程序具有的所有路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
  { path: 'list', loadChildren: './pages/list/list.module#ListPageModule' },
  { path: 'detail', loadChildren: './pages/detail/detail.module#DetailPageModule' },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

您现在可以通过注入路由器并调用来在不同页面之间导航：

import { Router } from '@angular/router';

constructor( private router: Router) {}

navigateToHome(): void {
  this.router.navigateByUrl('home');
}

您可以从此GitHub repository 中找到重大更改列表

您可以使用TSLint rules for Ionic Angular v4 Migration，它使用 tslint、codelyzer 和 Angular 编译器警告并自动修复重大更改文件中列出的语法更改。