ionic3 左侧菜单栏显示 用户名

分析

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

---

自此，大功告成（最喜欢的一句话）