Reputation: 4552
I want to move from 1 page to another page and for that I have write below code in home.page.html
file.
<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
<ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>
Below is home.page.ts
file code.
export class HomePage {
constructor(public navController: NavController) {
}
goToLoginPage(){
this.navController.navigateForward(LoginVCPage) // Getting error at this line.
}
}
Below is error screenshot.
Any help will be appreciated
Upvotes: 5
Views: 14967
Reputation: 6521
In Ionic 4 using NavController
is deprecated. See this statement from the 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 manages it's routes in a separate file, in Ionic 4 this file is named app-routing.module.ts
. Every time you create a new page using ionic g page pagename
the CLI will automatically create a new entry in the routes
array in app-routing.module.ts
.
So assuming you have created a test page and now have following routes in 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' },
];
You can move to another page by adding a href property to your button with the corresponding path (e.g. '/test'
) to the page you want to move to:
<ion-button href="/test">Move to test page</ion-button>
You could also use the routerLink
directive as pointed out here:
<ion-button [routerLink]="['/test']">Move to test page</ion-button>
If you want/need to navigate programmatically you'll have to inject the router service into your page/component and call navigateByUrl
like so:
constructor(private router: Router) { }
goToTestPage() {
this.router.navigateByUrl('/test');
}
Also see the Angular docs on routing and the Ionic v4 docs on this topic.
Upvotes: 16
Reputation: 472
To add to @Phonolog 's answer you should also use routerDirection="forward"
or whatever direction it may be.
Upvotes: 0