分析
ionic3导航统一用的是nav导航，可以携带参数，但是左侧菜单栏是在app的根组件中，他的生命周期中，只会加载一次，故，退出登录后，app里面的变量属性不会切换。这里就造成了 用户名无法切换的问题，只显示第一次加载的值
解决办法
参看了下ionic3的官方，可知，有个events的对象，可以发布和订阅消息，这个知识点可以解决我们上面的问题，在app加载的时候 订阅用户的信息。在登录后发布新的用户信息。
具体代码
app.html <ion-menu [content]="content"> <ion-content class="f6-bk"> <div class="user-avatar" text-center style="background: url(../assets/personlbg.jpg) center center no-repeat;background-size: cover;"> <!--<img src="assets/imgs/touxiang-moren.jpg" onerror="this.src='assets/imgs/touxiang-moren.jpg'" width="80" height="80"/> <p>{{username}}</p>--> <ion-row align-items-center> <ion-col col-auto> <img src="assets/imgs/touxiang-moren.jpg" width="60" height="60" /> </ion-col> <ion-col style="text-align: left;"> <p style="font-size: 20px;margin: 5px 0">{{username}} </p> <p class="color-8a">{{rolename}}</p> </ion-col> </ion-row> </div> <!-- div menuList：是主要的菜单部分，这部分是菜单重点 --> <div class="menu-list"> <ion-list> <button menuClose="left" ion-item *ngFor="let p of pages" (click)="openPage(p.index)"> <ion-icon class="{{p.icon}}"></ion-icon> {{p.title}} </button> </ion-list> <div class="logout"> <ion-row> <ion-col> <button menuClose="left" ion-button clear (click)="openPage(2)"> <ion-icon class="icon-caidaniconwodehui"></ion-icon> 个人中心 </button> </ion-col> <ion-col> <button menuClose="left" ion-button clear (click)="logout()"> <ion-icon class="icon-iconfonticon2"></ion-icon> 退出登录 </button> </ion-col> </ion-row> </div> </div> </ion-content> </ion-menu> <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
app.component.ts 关键代码
export class MyApp { @ViewChild(Nav) nav: Nav; rootPage: any = HomePage; username: string = this.storage.get("username"); rolename: string = this.storage.get("rolename"); pages: any = []; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public storage: StorageProvider, private tool: ToolProvider, private alertCtrl: AlertController,public events: Events) { this.initializeApp(); this.pages = [ {index: 1, title: '修改密码', icon: 'icon-password'}, {index: 2, title: '修改个人信息', icon: 'icon-edit'}, {index: 3, title: '版本更新', icon: 'icon-shuaxin'}, // {index: 4, title: '系统信息', icon: 'icon-iconfonticonfontjixieqimo' } ]; //接受订阅消息 events.subscribe('user:created', (user, time) => { this.username = user.username; this.rolename = user.rolename; console.log('Welcome', user, 'at', time); }); }
登录页面login.ts的 关键代码
userinfo = { username: '', password: '', rolename:'' }; doLogin() { if (this.userinfo.username == null || this.userinfo.username == "") { this.tools.toast("请输入用户名"); setTimeout(() => { this.nameInput.setFocus(); }, 500); return; } else if (this.userinfo.password == null || this.userinfo.password == "") { this.tools.toast("请输入密码"); setTimeout(() => { this.passInput.setFocus(); }, 500); return; } else { this.http.get(this.apiService.url.validateLogin_App, { loginname: this.userinfo.username, password: this.userinfo.password }).subscribe(res => { if (res.success) { console.log(res) this.storage.set("loginname", res.obj.sqpLoginName); this.storage.set("roleid", res.obj.sqpRoleId||0); this.userinfo.rolename = res.obj.sqpRoleName || ""; //发布订阅消息 this.events.publish('user:created', this.userinfo, Date.now()); this.navCtrl.setRoot(HomePage); this.tools.toast('登录成功'); } else { this.tools.toast('用户名或密码错误，请重新输入'); } }, err => { console.error(err); }) } }
自此，大功告成（最喜欢的一句话）
