Question

ionic start mySideMenu sidemenu --v2

使用这个我创建了一个sidemenu，我正在做一些login-logout的东西，所以我将用户详细信息存储在名为“userDetails”的localstorage变量中。当我点击sidemenu的注销选项时，它会被重定向到登录页面。

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

但我想要的是当用户点击退出时，删除localstorage vairable然后重定向到登录页面所以我写了一个方法，删除“userDetails”并重定向到“登录页面”，但收到错误，如“无法读取属性'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属性时，您正在调用注销方法。请修改如下：

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

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

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

1 个答案: