CODEWITHSUNDEEP
ionic-frameworkionic2angular2-routing
erin
erin

Reputation: 665

Ionic path routing (like RouterModule in Angular 2)

(Preface: I'm coming from a C#/WPF background, and brand new to web dev in general - bear with me!)

Using Angular 2, I am able to define my routes like this:

    RouterModule.forChild([
        { path: 'contacts', component: ContactsComponent }
    ])

Then, in some html, I can refer to it using the routerLink syntax:

routerLink='/contacts'

This works great, and ultimately it allows me to replace the string with a binding, so I can get the paths at runtime, allowing the data to determine the navigation structure.

Now, I'm attempting to do something similar in Ionic 2, but if it's possible, it's not obvious to me. I've seen how you can use [navPush] to bind to a page using deeplinking (like this person did: http://plnkr.co/edit/syUH0d6SJd2gAjqaPLwr?p=preview), but that requires the page to be defined ahead of time in the component that wants to use it.

Does Ionic's navigation structure support this?

Upvotes: 3

Views: 2085

Answers (1)

erin
erin

Reputation: 665

After a lot of digging, I've found what I was doing wrong. Here's how to direct link to a path, using Ionic v2 deep linking:

In app.module.ts imports add:

IonicModule.forRoot(MyApp, {}, {
  links: [
    { component: ContactsPage, name: 'ContactPageName', segment: 'contacts' }
  ]

Make sure to also add the ContactsPage to the declarations and the entryComponents.

Then, in the html of the page initiating the navigation, you can use it declaratively, like this

navPush="ContactPageName"

Note you are using the name of the direct link!

In my case, I'm getting a list of items from a json file, so looping through them like this:

 <ion-item *ngFor="let contact of contacts" detail-push>
      <button ion-button navPush="{{contact.link}}">Go</button>
 </ion-item>

where my json file includes:

    "link": "ContactPageName"

Hope that helps someone else!

Upvotes: 6

Related Questions