ionic混合开发——个人头像处理

angular： 单向绑定{{xxx}}
ion-avatar： 头像组件

• more.ts文件

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

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


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

  public notLogin: boolean = true;
  public logined: boolean = false;
  public headface: string;
  public userinfo: string[];

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public loadCtrl: LoadingController,
    public rest: RestProvider,
    public storage: Storage,) {
      super()
  }

  showModal() {
    //创建要modal的页面
    let modal = this.modalCtrl.create(LoginPage);
    modal.present();    // 把页面modal出来
  }

  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.userinfo = userinfo;
            this.headface = userinfo["UserHeadFace"] + "?" + (new Date()).valueOf();   //防止浏览器缓存
            this.notLogin = false;
            this.logined = true;
            loading.dismiss();
          }
        )

      } else {
        this.notLogin = true;
        this.logined = false;
      }
    })
  }
}

• more.html文件

<!--
  Generated template for the MorePage page.

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

  <ion-navbar>
    <ion-title content page>更多</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <div *ngIf = "notLogin">
    <ion-card>
      <ion-card-header text-center>
        登录飞行船，体验更多功能
      </ion-card-header>
      <ion-card-content text-center>
        <button ion-button outline small (click)="showModal()">登录/注册</button>
      </ion-card-content>
    </ion-card>
  </div>
  <div>
    <ion-list class="marginTop">
      <button ion-item>
        <ion-avatar item-start>
          <img src="{{headface}}" />
        </ion-avatar>
        <h2>{{userinfo.UserNickName}}</h2>
        <p>查看个人主页或编辑简介</p>
      </button>
    </ion-list>

  </div>
</ion-content>

在rest.ts文件中添加

  /**
   * 获取后台用户头像信息
   * 
   * @param {any} userId 
   * @returns {Observable<string[]>} 
   * @memberof RestProvider
   */
  getUserInfo(userId): Observable<string[]> {
    return this.getUrlReturn(this.apiUrlUserInfo + "?userId=" + userId)
  }