How to redirect to a page from a method by selecting an option in the sidemenu
ionic start mySideMenu sidemenu --v2
using this I created a sidemenu, I am doing some login stuff, so I saved the user details in a localstorage variable named "userDetails". when i click on the sidemenu logout option it is redirected to the login page.
import { homePage } from '../pages/home/home';
import { DetailsPage } from '../pages/Details/Details';
import { AddclientPage } from '../pages/Addclient/Addclient';
import { Storage } from '@ionic/storage';
import { LoginPage } from '../pages/login/login';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = homePage;
pages: Array<{title: string, component: any,icon:string}>;
constructor(platform: Platform,public storage:Storage,public mqttservice:Mqttservice) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
this.pages = [
{ title: 'Home ', component: homePage ,icon:"home"},
{ title:'Addclient',component:AddclientPage,icon:'add'},
{title: 'Users' ,component:DetailsPage,icon:"people"},
{ title:'addclient',component:AddclientPage,icon:"person-add"},
{title:'Logout',component:LoginPage,icon:"log-out"}
];
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
but what I want is when the user clicks on logout, removes the localstorage vairable and then redirects to the login page so I wrote a method that removes "userDetails" and redirects to "loginpage" but I get an error like "not can read property setRoot "undefined"
import { homePage } from '../pages/home/home';
import { DetailsPage } from '../pages/Details/Details';
import { AddclientPage } from '../pages/Addclient/Addclient';
import { Storage } from '@ionic/storage';
import { LoginPage } from '../pages/login/login';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = homePage;
pages: Array<{title: string, component: any,icon:string}>;
constructor(platform: Platform,public storage:Storage,public mqttservice:Mqttservice) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
this.pages = [
{ title: 'Home ', component: homePage ,icon:"home"},
{ title:'Addclient',component:AddclientPage,icon:'add'},
{title: 'Users' ,component:DetailsPage,icon:"people"},
{ title:'addclient',component:AddclientPage,icon:"person-add"},
{title:'Logout',component:this.logout(),icon:"log-out"}
];
}
logout(){
this.storage.remove('userDetails);
this.nav.setRoot(LoginPage);
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
source to share
You call the exit method when you try to create a property pages
. Please change it as follows:
this.pages = [
{ title: 'Home ', component: homePage, icon:"home" },
{ title:'Addclient', component:AddclientPage, icon:'add' },
{ title: 'Users', component:DetailsPage, icon:"people" },
{ title:'addclient', component:AddclientPage, icon:"person-add" },
{ title:'Logout', component:null, icon:"log-out" }
];
Note that the logout option has null as a component instead of the logout method. Now in your method openPage
:
openPage(page) {
if(!page.component) {
// Only the logout has the component as null
this.logout();
} else {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
source to share