Ionic 4 - How to Handle "N" Details Page

Ionic Framework
1

How to Create N Details Page.
Here is My Json Structure

"categories":[{"name":"category","child-categories":"[{"name":"child_category","child-categories":"[{},{},{}]"},{},{}]",}]

In Ionic 4, I created a Category Page.If it has child_categories, it dig down to self with that data.
category.page.ts

openCategories(category){
let temp_breadcrumbs:any;
temp_breadcrumbs=JSON.parse(JSON.stringify(this.breadcrumbs));
temp_breadcrumbs.push(category.name)
let navigationExtras: NavigationExtras = {
queryParams:{‘name’ : category.name},
queryParamsHandling: ‘merge’ ,
state:{
‘categories’: category.child_categories,
‘breadcrumbs’:temp_breadcrumbs
}
};
//this.navCtrl.navigateForward([“tabs/tab1/child-category”],navigationExtras); I Tried This Also.
this.router.navigate([“tabs/tab1/category”],navigationExtras).then(val=>{console.log(val)},
rej=>{console.log(rej)}).catch(val=>{
console.log(val);
});

I don’t know why ionic 4 not open self as new page with navigation extras…

2

Hello @KsspAm43

  1. On your categories page :

IMPORT

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

CONSTRUCTOR

constructor(private router: Router) { }

TO SEND DATA TO DETAIL PAGE:

this.router.navigate(['/detail', {
      post: JSON.stringify(yourObject)
}]);
  1. On the detail page:

IMPORT

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

CONSTRUCTOR

constructor(private activatedRoute: ActivatedRoute) {
   this.post = JSON.parse( this.activatedRoute.snapshot.paramMap.get('post') );
}
2 Likes
3

okay i will try…Thanks For Fast Reply

4

It’s working! but it’s not a good way.Looks URL Below! Did you know any other idea!

http://localhost:8100/tabs/tab1/child-category;post={"id":3,"name":"Electric%20Fans","image":"http:%2F%2F192.168.1.30:8000%2Fimg%2Fno_image_available.png","brand_id":null,"has_child":1,"parent_id":1,"created_at":"2019-06-20%2014:11:21","updated_at":"2019-06-20%2014:12:36","products":[{"id":1,"name":"Oreint%20120W%20Fan","category_id":3,"brand_id":null,"details_img":"%2Fimg%2Fno_image_available.png","product_desc":null,"created_at":"2019-06-20%2014:12:36","updated_at":"2019-06-20%2014:12:36"}]}

Anyway Thank you!..Have a Great Day…

5

If you want clean and beautiful URL:

  1. You should create a service
  2. param your root ( example: path: ‘detail/:id’ )
  3. on the url pass only the id
  4. on the detail pass find the post by the id
6

Okay Good Idea. Also Got Tutorial For this Routing…