Navigate with ionic angular-CodePudding

I'm new to using ionic, but and I've been trying to navigate through pages, lets say I want to go from a signin page, to the tabs page. As of now I don't want to implement any backend API, I just need the login button to link itself to the next page. Currently this is how I've implemented it. I have a path for /tabs in my app routing module, however when clicking this button nothing happens.

CodePudding user response：

Is important to care about your routes file app-routing.module.ts to see how it is implemented. Follows a suggestion:

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)
  }
];

CodePudding user response：

the answer of @Everton Costa is part of the answer but will do a bit edit in it.

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)
  }
];

And in order to perform the navigation, either on the button itself u put attribute routerLink like

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

or we could access it from code like add in login.component.ts file the following :

first u add at the top of this page this line:

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

and in the constructor u add this:

constructor(private router: Router){}

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

and in html :

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