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

Question

我想从一页移动到另一页，为此我在 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。请参阅 Migration Guide 中的此语句：

In V4, navigation received the most changes. Now, instead of using Ionic's own NavController, we integrate with the official Angular Router.

Angular 在一个单独的文件中管理它的路由，在 Ionic 4 中这个文件被命名为 app-routing.module.ts。每次您使用 ionic g page pagename 创建新页面时，CLI 都会自动在 app-routing.module.ts.

的 routes 数组中创建一个新条目

所以假设您已经创建了一个测试页面并且现在在 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 指令，正如 here:

所指出的

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

如果您 want/need 以编程方式导航，则必须将路由器服务注入 page/component 并像这样调用 navigateByUrl:

constructor(private router: Router) { }

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

另请参阅有关此主题的 Angular docs on routing and the Ionic v4 docs。

Answer 2

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

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

How to Move from one page to another in ionic 4?

ionic-framework

ionic4