How to navigate between pages in ionic 4 & 5? - ionic4

Question

I had a project that I developed with ionic 3. But I took a break and when I started working again with ionic, I saw the navigation system change in the new versions. My project is a simple project. This project that lists the data in the a array and details about the data appear on a different page.
I was doing this on Ionic 3:
homepage.ts
export class HomePage {
items = [];
constructor(public navCtrl: NavController) {
this.initializeItems();}
initializeItems() {
this.items = [
{
'title': 'John',
'image': '',
'hair': 'black',
},
{
'title': 'Brendon',
'image': '',
'hair': 'blonde',
}];
openNavDetailsPage(item) {
this.navCtrl.push(DetailsPage, { item: item });
}
detailspage.ts
export class DetailsPage {
item;
constructor(params: NavParams) {
this.item = params.data.item;
}
}
NavCtrl and NavParams are no longer available in version 5 (and I think in version 4). I did to navigate from the home page to the next page(ionic 5).
homepage.ts:
toDetailsPage(){
this.router.navigate(['details'])
}
However, I couldn't navigate according to the data on my list. How can I do this according to the next generation version?

Answer 1

app.routing.module.ts (Routing Module)
const itemRoutes: Routes = [
{ path: 'item', component: ItemListComponent},
{ path: 'DetailsPage/:id', component: DetailComponent }
];
homepage.ts file
import { Router } from '#angular/router';
export class HomePage {
constructor(private router: Router)
openNavDetailsPage(item) {
this.router.navigate(['/DetailsPage', { item: item }]);
}
}
.html file
If you directly want to route through html page:
<ion-button routerLink="/DetailsPage">Log In </ion-button>
or
<ion-button [routerLink]="['/DetailsPage', item.id]">Log In </ion-button>
detail.ts file
import { ActivatedRoute, Router } from '#angular/router';
export class DetailComponent implements OnInit {
id: any;
constructor(private route: ActivatedRoute,
private router: Router) { }
ngOnInit() {
this.id = this.route.snapshot.paramMap.get('id');
}
}
In addition to using a JSON
homepage.ts file
this.router.navigate(['/DetailsPage', { item: JSON.stringify(item) }]);
detail.ts file
this.item = JSON.parse(this.route.snapshot.paramMap.get('item'));
one more way
homepage.html
<div *ngFor=""let item of items"> // here items is an array
<button (click)="goToDetail(item)" class="rgt-btn">
<ion-icon slot="icon-only" name="add-circle" ></ion-icon>
</button>
</div>
homepage.ts
import { NavigationExtras, Router } from '#angular/router';
export class HomePage {
constructor(private router: Router)
goToDetail(item){
let navigationExtras: NavigationExtras = item;
this.router.navigate(['/DetailsPage'], navigationExtras);
}
}
DetailsPage.ts
import { Router } from '#angular/router';
export class DetailComponent implements OnInit {
item: any;
constructor(private router: Router) {
if (this.router.getCurrentNavigation()) {
this.item = this.router.getCurrentNavigation().extras;
}
}
}
> OR With the help of service page
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class NavExtrasService {
extras: any;
constructor() { }
public setExtras(data){
this.extras = data;
}
public getExtras(){
return this.extras;
}
}
Let's say I'm navigating from home to detail page, In page A:
this.navExtras.setExtras(extras)
this.router.navigateByUrl('detailPage');
Then in Detail Page, I retrieve the extras this way:
let newData: any;
this.newData = navExtras.getExtras();