如何在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

在离子4中，不建议使用NavController。请参见Migration Guide中的以下语句：

  

在V4中，导航更改最多。现在，代替使用   Ionic自己的NavController，我们与官方Angular集成   路由器。

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

因此，假设您已创建测试页，并且现在在app-routing.module.ts中具有以下路线：

app-routing.module.ts

您可以通过将href属性添加到要移动到的页面的相应路径（例如const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: './home/home.module#HomePageModule' }, { path: 'test', loadChildren: './test/test.module#TestPageModule' }, ]; ）来移动到另一页面：

'/test'

您还可以使用here指出的<ion-button href="/test">Move to test page</ion-button> 指令：

routerLink

---

如果您希望/需要以编程方式进行导航，则必须将路由器服务注入到页面/组件中，并像这样调用navigateByUrl：

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

另请参阅本主题的Angular docs on routing和Ionic v4 beta docs。

Answer 2

要添加到@Phonolog的答案中，您还应该使用routerDirection="forward"或它可能指向的任何方向。