NavPush from non-nav component


#1

I’m having a problem with navigating in my app and the docs are kinda leaving me stumped.
I have a tabs template with the pages “Home”, “Artists” and “Saved”. Artists consists of cards components that when clicked, should navigate to the Detail page of that artist (so it also needs to pass on parameters to load the correct content for the selected item). I implemented it like this: <ion-card (click)="viewArtist(artist.id)"> but no idea how to navigate to the detail page in the viewArtist() function. I tried injecting a NavController into ArtistsPage and using navCtrl.push, but it gives me

ERROR TypeError: “this.navCtrl.push is not a function”

Conversely, if I use a button, it exhibits exactly the behavior I want from the cards: <ion-button href="detail">Detail</ion-button> will correctly push the Detail page and I can navigate back to the previous page with the navigation back button on that page. I tried wrapping the cards in an <a href="detail"> but it’s opening a new page rather than pushing it, and is also not desirable as I can’t pass on parameters that way.

I hope this wasn’t too confusing, I’m just having a really hard time figuring out what should probably be a pretty simple solution…