Creating a function to push the parameter page

Ionic Framework ionic-v3
1

I have a navigation in my ion-footer. In my app.component.ts I have this:

  goToNews() {
    this.app.getActiveNav().push(News);
  }

  goToPlayers() {
    this.app.getActiveNav().push(Players);
  }

IN TEMPLATE:

  <a (click)='goToNews();'>Nieuws</a>
  <a (click)='goToPlayers();'>Spelers</a>

That works. Now I want to create a function that I can give a pagename as parameter to get rid of duplicate code. So i’m trying to do this.

  goTo(page) {
    console.log(page);
    this.app.getActiveNav().push(page);
  }

IN TEMPLATE:
  <a (click)='goTo(Players);'>SomeRandomPageName</a>

And I get this error:
Uncaught (in promise): invalid views to insert

I also tried to give the parameter with “” which gives a different error. Where am I going wrong?

2

Ummm just an idea

goTo(page) {
    console.log(page.component);
    this.app.getActiveNav().push(page.component);
}

<a (click)='goTo({component: Players});'>SomeRandomPageName</a>
3

Sadly no, same error :frowning:

4

maybe it’s because the html don’t find the import?

then maybe

ts:

 import Players...     

 pagePlages:any = {component: Players};

goTo(page) {
    console.log(page.component);
    this.app.getActiveNav().push(page.component);
}

html:

<a (click)='goTo(pagePlages);'>SomeRandomPageName</a>
5

That works but then it’s the same as the first example. Because then I still need a different function for every page that I want to use.

I hoped on something where i could give the name in the template that would make it just one function.

With your first solution the page.component is also undefined in the component. I can give Players to the component as a string( goTo(“Players”) ) and it will console.log: Players but since it’s a string it wont be able to push to.

6

Well the thing is, it seems that if you pass the page from the html, you ill need to import the component

If you use Ionic3, don’t know if it works without lazy loading, but maybe a simple try is to modify just a bit your initial code, like:

<a (click)="goTo('Players');">SomeRandomPageName</a>
7

Personally, I think this is a fool’s errand. TypeScript gives us great protection against stupid typos: everybody has written BannanaPage when they meant BananaPage, and it’s so much better when that gets caught immediately when you type it instead of at runtime.

You’re basically building a system to subvert all of that, and simultaneously adding action-at-a-distance to your app, which is harder to read, test, and debug.

8

Ah yea i’m using Ionic 3.

With that change the error changes to:

Uncaught (in promise): invalid link: Players

@rapropos How would you add links to an ion-footer (that should display on every page) then? I’m still new to Ionic so if there’s a better way please tell me :slight_smile:
Or is it better to make a function for each of the links?

9

Well then, sometimes quick and dirty solution are the best, why then just doing something like:

goTo(page:string) {
     this.app.getActiveNav().push(page === 'players' ? Players : (page === 'somethingElse' ? SomethingElse : WellNotFinallyThisOne));
 }

<a (click)="goTo('players');">SomeRandomPageName</a>
10

I would put them in app.html, and the corresponding gotoXXX() functions in app.component.ts. I would not worry about having several different gotoXXX() functions: there is no performance loss, the effect on app size will not be measurable, and you keep the many benefits of type-checking.

<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>
<ion-footer>foo</ion-footer>
11

I had the same problem and for the moment the best solution for me is to use the navPush directive:

<button ion-button [navPush]="pushPage" [navParams]="params">Go</button>

Here is the full documentation.

No need to create new functions, you only need to set the variables in the component and import the components you want to navigate to. navParams is optional so you can omit it.

In your case it could be something like this in the template:

<button ion-button [navPush]="newsPage" [navParams]="newsParams">News</button>
<button ion-button [navPush]="playersPage" [navParams]="playersParams">Players</button>

and in the component:

 import {News} from ...
 import {Players} from ...  
...
newsPage: any = News;
playersPage: any = Players;

newsParams: any = {par1: 'aaa', par2: 'bbb'};
playersParams: any = {par1: 'ccc', par2: 'ddd'};