如何在ionic 4中从一页移动到另一页？

Question

我是Ionic的初学者，这是我的第一个演示。

我想从一页移动到另一页，为此，我在home.page.html文件中编写了以下代码。

<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
    <ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>

下面是home.page.ts文件代码。

export class HomePage {

  constructor(public navController: NavController) {

  }

  goToLoginPage(){
    this.navController.navigateForward(LoginVCPage) // Getting error at this line.
  }
}

下面是错误截图。

任何帮助将不胜感激

Answer 1

在Ionic 4中，NavController已弃用。请参阅《迁移指南》中的以下声明：

在V4中，导航更改最多。现在，我们不再使用Ionic自己的NavController，而是与官方的Angular Router集成。

Angular在单独的文件中管理其路由，在Ionic 4中此文件名为app-routing.module.ts。每次使用ionic g page pagenameCLI 创建新页面时，都会在中的routes数组中自动创建一个新条目app-routing.module.ts。

因此，假设您已经创建了一个测试页，现在在中具有以下路由app-routing.module.ts：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'test', loadChildren: './test/test.module#TestPageModule' },
];

您可以通过在按钮上添加href属性以及'/test'要移动到的页面的相应路径（例如），来移动到另一页面：

<ion-button href="/test">Move to test page</ion-button>

您还可以使用此处routerLink指出的指令：

<ion-button [routerLink]="['/test']">Move to test page</ion-button>

如果您希望/需要以编程方式进行导航，则必须将路由器服务注入您的页面/组件并按如下所示进行调用navigateByUrl：

constructor(private router: Router) { }

goToTestPage() {
    this.router.navigateByUrl('/test');
}

另请参阅有关路由的Angular文档和有关此主题的Ionic v4文档。