ionic混合开发APP模块——更新注销

NavController：导航控制器组件的基类

页面跳转

  gotoUserPage() {
    this.navCtrl.push(UserPage);      //UserPage跳转页面
  }

修改用户名及注销UserId

• 创建user页面

ionic g page user

• user.html

<!--
  Generated template for the UserPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>个人中心</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list class="marginTop marginButtom">
    <button ion-item>
      <ion-avatar item-start>
        <img src="{{headface}}" />
      </ion-avatar>
      <h2>修改头像</h2>
    </button>
  </ion-list>

  <ion-list>
    <ion-item>
      <ion-label>用户昵称</ion-label>
      <ion-input type="text"[(ngModel)]="nickname"></ion-input>
    </ion-item>
  </ion-list>

  <div padding text-center class="paddingTop">
    <button ion-button color="primary" block (click)="updateNickName()">保存</button>
  </div>
  <div padding text-center class="paddingTop">
    <button ion-button color="danger" block (click)="logout()">注销</button>
  </div>
</ion-content>

• user.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ToastController, ViewController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { BaseUI } from '../../common/baseui';
import { RestProvider } from '../../providers/rest/rest';

/**
 * Generated class for the UserPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-user',
  templateUrl: 'user.html',
})
export class UserPage extends BaseUI {

  headface: string;
  nickname: string = "加载中...";
  errorMessage: any;

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public storage: Storage,
    public loadCtrl: LoadingController,
    public rest: RestProvider,
    public toastCtrl: ToastController,
    public viewCtrl: ViewController
  ) {
    super()
  }

  ionViewDidEnter() {
    this.loadUserPage();
  }

  loadUserPage() {
    this.storage.get('UserId').then((val) => {
      if (val != null) {
        //加载用户数据
        var loading = super.showLoading(this.loadCtrl, '1111');
        this.rest.getUserInfo(val)
          .subscribe(
            userinfo => {
              this.nickname = userinfo["UserNickName"];
              this.headface = userinfo["UserHeadFace"] + "?" + (new Date()).valueOf();   //防止浏览器缓存
              loading.dismiss();
            },
            error => this.errorMessage = <any>error);
      }
    })
  }

  updateNickName() {
    this.storage.get('UserId').then((val) => {
      if (val != null) {
        var loading = super.showLoading(this.loadCtrl, "修改中...");
        this.rest.updateNickName(val, this.nickname)
          .subscribe(
            f => {
              if (f["Status"] == "OK") {
                loading.dismiss();
                super.showToast(this.toastCtrl, "昵称修改成功")
              }
            }
          )
      } else {
        loading.dismiss()
        super.showToast(this.toastCtrl, "昵称修改失败")
      }
    },
      error => this.errorMessage = <any>error);
  }

  logout() {
    this.storage.remove('UserId');   //清除本地缓存
    this.viewCtrl.dismiss();  
  }

}

• rest.ts

/**
   * 更新昵称
   * 
   * @param {any} userId 
   * @param {any} nickname 
   * @returns {Observable<string[]>} 
   * @memberof RestProvider
   */
  updateNickName(userId, nickname): Observable<string[]> {
    return this.getUrlReturn(this.apiUrlUpdateNickName + "?userId=" + userId + "&nickname=" + nickname)
  }