How to get a reference to App component

Ionic Framework ionic-v3
1

Is there a way to get a reference of my @App instance in one of my @Page instances? Constructor injection in my @Page doesn’t seem to work – i. e. “constructor(private _app: MyApp)”?
It’s probably not good idea and I could, of cause, use a service to communicate between both components. Are there any other ways to accomplish this? Like publishing/subscribing to events between components?

1 Like
2

what are you trying to accomplish with the App instance?

3

I have to switch the root property of my <ion-nav/> element which is part of my App template:
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
The root is bound to the rootPage property of my App component. I want to implement a function like

switchRootPage() {
  this.rootPage = AnotherTabPage;
}

This function should be triggered by a child component of my App.

4

I’m facing a similar problem. I have a function for sidemenu modification in my @App and need to access it from different pages, like @AndreasK 's switchRootPage() above.
The sidemenu (and the function for its modification) is just part of my @App.

Tried different things, but I wasn’t able to get a reference to the app instance.
Any advice how this can be done, or is it bad style to access the app directly?

1 Like
5

I guess there is currently no way to get a reference to the App instance. So my current workaround for now is to use a SwitchTabSerivce:

@Injectable()
export class SwitchTabsService {
    ComApp: IComApp;
    public register(comapp: IComApp) {
        this.ComApp = comapp;
    }
    public homeTabs() {
        if (this.ComApp) {
            this.ComApp.showHomeTabs()
        }
    }
    public memberTabs() {
        if (this.ComApp) {
            this.ComApp.showMembersTabs();
        }
    }
}

And the App implements the following Interface, injects this service to its constructor and calls its register(this) function:

export interface IComApp {
    showMembersTabs();
    showHomeTabs();
}

Another solution would be to use ionic2’s event pub/sub api: http://ionicframework.com/docs/v2/api/util/Events/

1 Like
6

To change the root page you can use the setRoot method of the NavController, i.e:

this.nav.setRoot(MyPage)

1 Like
7

As far as I see now, it’s really not necessary to access the app component from other pages, saying it’t probably bad style.
I created a data store that provides an observable to which the app subscribes. The data store is modified by other pages and the app gets notified. Plain and clean.
So @AndreasK, I don’t think you have just a workaround, an injectable is the proper way to go.

8

I believe the section entitled “Navigating from the Root Component” under this topic

answers the question pretty well. Briefly, you inject IonicApp and include an ‘id’ attribute in your app root element to enable accessing it via IonicApp.getComponent(id).

9

Why not just inject the root component into the page component?

10

Because that makes for a spaghetti app that is hard to read, maintain, and test.

11

I got access to it via Events.

12

@mpaland @battou could you share a simple code to show how you do that please?

In my case, menu is defined statically at app start in App component, but once the user is logged, I would like to update the menu dynamically with new items, based on user preferences, received from back-end.

13

For the event of enabling or disabling the menu i did this:

this.events.subscribe('user:loggedIn', () => {
        console.log('enabling menu');
        this.menuCtrl.enable(true, 'onlyOneMenu');
});

When i log in i simply use:

this.events.publish('user:loggedIn');

I believe that with this method you also can enable or disable some features inside your application.

1 Like