How to use routing in IONIC 3

Question

I am developing an Ionic 3 application. Right now I am using NavController for routing and switching pages.

Ex : this.navCtrl.push(DetailsPage);

But I need to use Angular routing now.

I found similar question for Ionic 2, but does this work in Ionic 3 as well?

Can someone elaborate this?

Answer 1

You can use Ionic deep links for that.

Example from the doc:

@IonicPage({
  name: 'my-page',
  segment: 'some-path'
})

When navigating to this page as the first page in the app, the URL will look something like this:

http://localhost:8101/#/some-path

Good article about it: Link to Pages via URLs with Deep Linking in Ionic

Answer 2

Check this link for the detail of NavController link. Which you have to import into your current ts file, followed by : =>

There are two ways of navigation we can make use in ionic

1) DeepLink

2) Component navigation stack

DeepLink

deeplink navigation acts like webpage navigation like below example you have to use @ionicpage anotation in order to use deeplink navigation

https://locallhost:8000/#/HomePage/SecondPage

Component Navigation

You have to import your component in the respected ts file in order to navigate

There are three key words push, pop, setRoot.

1. setRoot

   Example:

   this.navCtrl.setRoot(HomePage);

   (or)

   this.navCtrl.setRoot("HomePage"); //DeepLink navigation

   Used to make the component as Root page, in other words, it creates an empty navigation stack where homepage is the root.

2. push

   Example:

   this.navCtrl.push(SecondPage);

   (or)

   this.navCtrl.push("SecondPage"); //DeepLink navigation

   The above example has push keyword where the navigation stack has one component inside its stack followed by Homepage. I mean, after homepage component, you will be having secondpage component in the navigation stack (HomePage/SecondPage).

3. pop

   Example:

   this.navCtrl.pop();

   (or)

   this.navCtrl.pop(); //DeepLink navigation

   Consider you are in secondpage now and wanted to go back to the previous page which is home page. Then just use the above example it will pop one component from the navigation stack and gives you only the homepage component in the navigation stack.

Answer 3

Mostly we use 3 things

1. this.navCtrl.push("pageName")
2. this.navCtrl.pop("pageName")
3. this.navCrl.setRoot("pageName")

Answer 4

Mostly We use Navigation Routing provided by Ionic 3. You must prefer:

1. this.navCtrl.push("pagename")
2. this.navCtrl.pop("pagename")
3. this.navCtrl.setRoot("pagename")

Also, if you are seeking TabsModule of Ionic 3, then use:

1. this.navCtrl.parent.select(tab or index)