如何通过选择侧菜单中的选项从方法重定向到页面

Question

ionic start mySideMenu sidemenu --v2

使用它我创建了一个侧菜单，我正在做一些登录注销工作，所以我将用户详细信息存储在名为"userDetails"的本地存储变量中。 当我从侧边菜单中单击注销选项时，它被重定向到登录页面。

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);
  }
}

但我想要的是当用户单击注销时，删除本地存储可用，然后重定向到登录页面 所以我写了一个删除"userDetails"并重定向到"loginpage"的方法，但出现错误，例如"无法读取未定义的属性'setRoot'

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 属性时调用 logout 方法。请像这样修改它：

   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);
    }
  }