使用 ionic angular 导航

Question

我是 ionic 的新手，但我一直在尝试浏览页面，假设我想从登录页面转到选项卡页面。截至目前，我不想实施任何后端 API，我只需要登录按钮 link 本身到下一页。 Currently this is how I've implemented it。我的应用程序路由模块中有 /tabs 路径，但是单击此按钮时没有任何反应。

Answer 1

关心你的路由文件很重要app-routing.module.ts看看它是如何实现的。遵循建议：

const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then(m => m.LoginModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./pages/tabs-page/tabs-page.module').then(m => m.TabsModule)
  }
];

Answer 2

@Everton Costa 的答案是答案的一部分，但会对其进行一些编辑。

const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
  }
];

为了执行导航，您可以在按钮本身上放置属性 routerLink，例如

<ion-button routerLink="/home"></ion-button>

或者我们可以通过代码访问它，例如在 login.component.ts 文件中添加以下内容：

首先你在本页顶部添加这一行：

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

然后在构造函数中添加：

constructor(private router: Router){}

navigateToPage(route: string) {
    this.router.navigate([route]);
}

并在 html 中：

<ion-button (click)="navigateToPage('/home')"></ion-button>

使用 ionic angular 导航

Navigate with ionic angular

html

navigation

ionic-framework

angular