How to reload app.components ionic

Ionic Framework ionic-v3
1

how to reload app.components ionic 2

2

why would you do that?

2 Likes
3

I need to reload my app.components to show the side menu as ‘Logout’ after logging in, which was before ‘Login’

4

add import { App } from 'ionic-angular';
constructor public appCtrl: App

and
this.appCtrl.getRootNav().setRoot(yourcomponents);

1 Like
5

That’s not really a good way to achieve that…

6

try it

this.appCtrl.getRootNav().setRoot(yourcomponent);
window.location.reload()
2 Likes
7

I want to do this since in the sidemenu, I am displaying data from the logged in user, I store the data in native storage, and as the menus are in component.ts to see the changes of the login I have to close the ap and reopen it,
How can I make changes to the menu reflect just logon?

8

So does anyone know how this is supposed to be done? I take it you’ve been answered @bengtler & @rlouie :open_hands:

9

You could probably trigger the update of something using Events: http://ionicframework.com/docs/api/util/Events/

1 Like
10

IMHO the entire premise of this discussion is flawed. “Reloading” is an imperative concept, and when you try to think imperatively you are fighting against the framework, which wants you to think reactively. So,

It’s not. You don’t want to be “forcing” or “reloading” anything. React to whatever change in circumstances has happened. For a specific example of managing user authentication status, see here.

1 Like
11

There is one scenario where this would be extremely useful… effectively a way to manually call a components ngOnInit() method. Consider this scenario:

  • I’m at the root page of my app, which has tabs
  • I navigate to a screen from the first tab
  • Before navigating I lose connection to the internet
  • I show a “Not connected” message and retry until connection is restored
  • Upon restoring the connection, i want to refresh the screen that I was navigating to

In order to do this in a clean modular way, I would like to know what the “current view” is, and then “refresh” or “re-init” that view. In the reactive way, I would have to subscribe to a “reconnected” event for every view in my app, which I definitely don’t want to do.

Any thoughts on a better way to do this?

2 Likes
12

+1 I need to do something very similar

13

for this you need to use events plugin

3 Likes
14

But the documentation of the new beta don’t include the events page, and if I try to use:

import { Events } from 'ionic-angular';

I have an error :frowning:

How is the new way to achieve it?

1 Like
15

Thanks a lot, but I finally find how to import it:

import { Events } from '@ionic/angular';

2 Likes
16

import { Events } from ‘ionic-angular’;

// first page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
console.log(‘User created!’)
this.events.publish(‘user:created’, user, Date.now());
}

// second page (listen for the user created event after function is called)
constructor(public events: Events) {
events.subscribe(‘user:created’, (user, time) => {
// user and time are the same arguments passed in events.publish(user, time)
console.log(‘Welcome’, user, ‘at’, time);
});
}

1 Like
17

This is working successfully. I used this to update a side menu that shows different items when user is logged in or not.

Everytime the user logs in or out, menu refreshing method is fired in my app component through the event.

Thank you!