使用离子角度导航答案

【问题标题】：Navigate with ionic angular使用离子角度导航
【发布时间】：2021-11-18 11:41:18
【问题描述】：

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

【问题讨论】：

嗨trynalearn！请以文本而不是图像的形式分享您的代码。

标签： html angular ionic-framework navigation

【解决方案1】：

@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>

【讨论】：

【解决方案2】：

关注你的路由文件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)
  }
];

【讨论】：