getRootNav() deprecated, use getRootNavById(): what's the value of the root nav id?

Ionic Framework ionic-v3
1

In ionic-angular 3.5.0, getRootNav() is set as deprecated

(getRootNav) is deprecated and will be removed in the next major release. Use getRootNavById instead.

getRootNavById id declared like following

getRootNavById(navId: string): NavigationContainer;

getRootNav() didn’t took any parameter, therefore to be honest, I don’t know the value of navId. How could I figure that out or how could I define my own value?

If I log the rootNav.id like following I found “n4” as a result, but look like a bit generic for a value, not sure if I should use that…

console.log(this.app.getRootNav()); => 'n4'

Thx in advance

3 Likes
2

Not that you have any reason to care about my opinion, but I think any design that is needing to reach across to access any navigation stack other than its own is broken. In order for code to be testable and readable, I consider strong barriers of spheres of influence essential. All code that deals with the root navigation stack should be in the app component, in which case you don’t have to worry about any of this.

3

Thx for your comment. Yes and no, actually I have to access this.app.getRootNav() to set dynamically the root nav because in my business case there are actually really three different root/path the user could follow

Furthermore, using this.app.getRootNav().setRoot I think could be useful when your app contains a tabs and other pages not related to these

1 Like
4

I handle this by exposing an Observable from a service, subscribing to it in the app component’s constructor, and setting the app component’s rootPage property corresponding to whatever state changes happen.

2 Likes
5

Sounds like an interesting pattern and solution. But, even it’s a really nice solution, I’m not convinced that it’s a way more correct way to set the root as using getRootNav() … but I gonna think about it :wink:

But if it such a case, maybe it would be better to remove getRootNav() instead of setting it as deprecated by getRootNavById

Anyhow my original question remains, what’s the id of the root nav? could I define my own id? or is really the id ‘n4’? is that ‘n4’ value a static value or a dynamic value?

2 Likes
6

You can use this this.app.getRootNavs()[0] because getRootNav() is

getRootNav(): any {
const rootNavs = this.getRootNavs();
if (rootNavs.length === 0) {
return null;
} else if (rootNavs.length > 1) {
console.warn(’(getRootNav) there are multiple root navs, use getRootNavs instead’);
}
return rootNavs[0];
}

import { App } from ‘ionic-angular’;

rootNavCtrl: NavController;

constructor( private app: App ) {}

this.rootNavCtrl = this.app.getRootNavs()[0]

2 Likes
7

thx but I rather not to, to much risk to generate null pointer exception

1 Like
8

So I’ve just done this:

HTML:

<ion-nav #nav [root]="rootPage"></ion-nav>

CODE:

  getNav() {    
    var navs = this._app.getRootNavs();
    if (navs && navs.length > 0) {
      return navs[0];
    }
    return this._app.getActiveNav('nav');
  }

Note:
This avoids any null pointer exceptions and is probably over-safe, but it’s working. Plus if this changes again, I only have to change this one method which all calls reference to get the nav.

Hope that helps.

D

2 Likes
9

thx for the code @Daveshirman! Yes absolutely that could potentialy avoid the null pointer and could be use as a workaround if my original question, “what’s the id of the root nav? is ‘n4’ static? how do I set my own value?” would not be solve till Ionic really remove the deprecated code.

The major reason while I’m seeing this as a workaround is the following: If I want to reuse that piece of code in different places in my app without having to copy/paste x times, I would have to add it for example in app.component and then with observable call it from any pages…which kind of add an over complexety to set the root of my app which is, in my point of view, not needed

but again, thx for the code, cool to have a workaround if needed.

hope one day Ionic clear this question with their documentation

10

So in order to call from anywhere in my app, I just raise an event e.g. event.publish(‘logout’), which i then consume in the app.component.ts by subscribing to it.

And yes, the docs are somewhat lacking sometimes, but for the most part are really good!

1 Like
11

With the introduction of ionic-angular 3.5.2, getActiveNav() was deleted :frowning: Therefore before getRootNav() will also be deleted without having an answer to my question or documentation, I rather liked to open a support issue in the Github issue list of Ionic:

4 Likes
12

thanks for your efforts. I’ve the same identical 1:1 issue.

I’ll follow github issue with interest.

1 Like
13

That should be its own issue. Please create one.
Also docs are not updated to reflect this: ion-app: Container Element for an Ionic Application

14

You don’t think it was deleted on purpose?
Or you mean just open an issue to fix the doc?

15

A patch update of a library should not delete code that might be used by users, especially not if it is documented code.

(That the docs are wrong now might be another, additional issue)

16

Here you go, I opened the following issue about the deletion of getActiveNav():

1 Like
17

An incoming patch will reinfect getActiveNav(), see

18

About root nav, there was already an issue about it:

19

3.5.3 was published yesterday, this.app.getActiveNav() is back :slight_smile:

5 Likes
20

Furthermore, using this.app.getRootNav().setRoot I think could be useful when your app contains a tabs and other pages not related to these

What did you do instead of using getRootNav() ?