angular - 如何通过在侧边菜单中选择一个选项从一个方法重定向到一个页面

Question

ionic start mySideMenu sidemenu --v2

using this I created a sidemenu ,I am doing some login-logout stuff,so i stored user details in localstorage variable named "userDetails". when i click on logout option from sidemenu ,it is redirected to 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 user clicks on logout ,remove the localstorage vairable and then redirect to login page so i wrote a method that removes "userDetails" and redirect to "loginpage" but am getting error like "can not read property 'setRoot' of 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);
  }

}

Answer 1

您在尝试创建 pages 属性时正在调用注销方法。请这样修改:

   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" }
    ];

请注意注销选项将 null 作为组件而不是注销方法。现在在您的 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);
    }
  }