分析

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

自此，大功告成（最喜歡的一句話）