CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2ionic3
LeonardoGuimaraes
LeonardoGuimaraes

Reputation: 275

How to define optional segment parameter in Ionic Page?

How it is possible to define a optional parameter in Ionic 3 PWA?

My current @IonicPage decorator looks like:

@IonicPage({
    segment: "landing/:id"
})

But the id param must be optional. If I do not pass the id, I receive this error:

Uncaught (in promise): invalid views to insert

How to do it?
Thanks in advance!

Upvotes: 5

Views: 2699

Answers (2)

schanzenbraut
schanzenbraut

Reputation: 21

Since Ionic 4 with Angular: One solution is the resolution of different paths, here with two optional ids in URL:

{ path: 'landing', loadChildren: () =>
  import("./landing/landing.module").then(m => m.LandingPageModule)},
{ path: 'landing/:id1', loadChildren: () =>
  import("./landing/landing.module").then(m => m.LandingPageModule)},
{ path: 'landing/:id1/:id2', loadChildren: () =>
  import("./landing/landing.module").then(m => m.LandingPageModule)}

Allways the same target. The magic will begins in component:

import { ActivatedRoute, Router } from "@angular/router";

@Component({
  selector: "landing",
  templateUrl: "./landing.page.html",
  styleUrls: ["./landing.page.scss"]
})
export class landingPage implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    let id1= this.route.snapshot.paramMap.get("id1");
    let id2= this.route.snapshot.paramMap.get("id2");

    // Test    
    if (id1) console.log(id1);
    if (id2) console.log(id2);
  }
}

And from page to page:

this.router.navigateByUrl('/landing');
this.router.navigateByUrl('/landing/' + '123');
this.router.navigateByUrl('/landing/' + '123/333');

The order is important and so is leaving the trailing slash on the first path.

Upvotes: 0

Sampath
Sampath

Reputation: 65870

There is no method yet.You need to send empty string when you don’t need it.That is the workaround for this now.

 this.navCtrl.push('landing', {
      'id': ''
    })

Upvotes: 4

Related Questions