I can't Push a page with a parameter given in the html

Ionic Framework ionic-v3
1

When I click on an item, I’d like the name of the page be passed in a function goTo().

<ion-item (click)="goTo(Page1)"></ion item>

This function in particular who pushes the page.

import { Page1 } from '../page1/page1';

goTo (page) {
    this.navCtrl.push(page);
  }

It works if I replace page in push() by Page1 but I can’t pass the parameter. Why ?

2

Your template, i.e. your HTML, can only access what is defined in your page class. At the moment, you import Page1 but it’s not defined in your class. So one solution would be to add the following into your class:

page1 = Page1;

Then in your HTML update it to:

<ion-item (click)="goTo(page1)"></ion item>

Alternatively, you could merely add a new function:

goToPage1() {
    this.navCtrl.push(Page1);
}

Add change your HTML to:

<ion-item (click)="goToPage1()"></ion item>

Personally I’m more of a fan of the latter, as it’s just a little more descriptive usually. Plus I don’t have to go about defining pages in my class.

2 Likes
3

Thanks, it’s what I did but I thought it would be easier to have only one function with the page in parameter.

4

There is another option, if you want to opt in to the lazy loading system. If you do that, you can navigate using strings, so (click)="goTo('Page1')" would work.