如何在不重新加载Ionic App的情况下显示更新的个人资料图片

Question

我正在使用Ionic App，并且已使用文件输入来更新Ionic App中的图像。

这是我的 updateimage.html ：

<ion-content padding style="text-align: center;">
  <ion-grid align-items-center justify-content-center style="height: 100%;">
    <ion-row align-items-center justify-content-center style="height: 100%;">
      <ion-col align-self-center justify-content-center col-12 col-md-6 col-xl-3 style="text-align: center;">
        <h2 class="myformh2">Update Profile Picture</h2>
        <h4 class="myformh2">Image Preview</h4>
        <img src="{{imageUrl ? imageUrl : './assets/imgs/def_face.jpg' }}" class="newimg22" />
        <form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage()">
          <ion-list>
            <ion-item class="newitem2">
              <ion-input placeholder="Upload Image" type="file" (change)="onImageSelected($event)"
                [(ngModel)]="img_upload" formControlName="img_upload" required></ion-input>
            </ion-item>
            <div>
              <button [disabled]="!updateprofileimg.valid" ion-button type="submit" class="newbtn11" color="primary"
                block>Change Profile Picture</button>
            </div>
          </ion-list>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

在此html中，用户可以更新个人资料图片。

这是我的 updateimage.ts ：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { Storage } from '@ionic/storage';
import { ManageaccountPage } from './../manageaccount/manageaccount';

@IonicPage()
@Component({
  selector: 'page-updateimage',
  templateUrl: 'updateimage.html',
})
export class UpdateimagePage {
  updateprofileimg : FormGroup;
  img_upload: any = [];
  selectedImage;
  imageUrl;
  converted_image;
  responseEdit: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder, public restProvider: RestapiProvider,
    private storage: Storage, private alertCtrl: AlertController) {
      this.updateprofileimg = this.formBuilder.group({
        img_upload: ['', Validators.required],
      });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad UpdateimagePage');
  }

  onImageSelected(event) {
    this.selectedImage = event.target.files[0];
    let reader = new FileReader();

    reader.onload = (e: any) => {
      this.imageUrl = e.target.result;
      this.converted_image = "data:image/jpeg;base64,"+this.imageUrl;
    };
    reader.readAsDataURL(this.selectedImage);
  }

  changeProfileImage()
  {
    this.storage.get("ID").then((val) =>
    {
      if(val)
      { 
        var fd = new FormData();
        fd.append('upic', this.selectedImage, this.selectedImage.name);
        fd.append('user_id', val);
        this.restProvider.updateprofileimg(fd, 'update_profilepic/'+val).subscribe((data) => {
          //console.log(data);
          if (data) {
            this.responseEdit = data;
            //console.log(this.responseEdit.msg);
            if (this.responseEdit.status === 'success') {
              this.presentAlert(this.responseEdit.msg);
            }
          }
        });
      }
    });
  }

  presentAlert($mess) {
    let alert = this.alertCtrl.create({
      title: $mess,
      buttons: [
        {
          text: 'Dismiss',
          role: 'cancel',
          handler: () => {
            this.navCtrl.setRoot(ManageaccountPage);
          }
        }]
    });
    alert.present();
  }

}

这是用于更新个人资料图像的代码，它是工作文件。我正在将此图片显示在侧边栏。

这是我的 app.html ：

<ion-grid class="formenu2">
    <ion-row align-items-center class="mymenuicons22">
      <ion-col col-4>
        <img class="imgsection12" [src]="profileImage" />
      </ion-col>
    </ion-row>
</ion-grid> 

我在此显示用户个人资料图像。

这是我的 app.component.ts ：

profileImage = './assets/imgs/hipster-man.jpg';
this.events.subscribe('userprofile:created', (data) => {
  this.userpimage = data;
  this.profileImage = `http://demowebsitedemo.com/uploads/user/${this.userpimage}`;
});

最初，个人资料图像设置为默认，并且当用户登录时，它将添加原始的个人资料图像。

这是我的 login.ts ：

createUserp(prouser) {
    this.events.publish('userprofile:created', prouser);
  }

getloginUsers(){

      this.restProvider.getUsers(this.userData, 'user_Login').subscribe((data) => {
        if (data) {
          this.responseData = data;
          this.userprofile = this.responseData.msg.user_img;
          if (this.responseData.status === 'success') {
            this.createUserp(this.userprofile);
          }
          else{
            this.presentAlert();
          }
        }
      });
}

在此ts文件中，当用户登录时，它将在边栏中添加原始个人资料图片。

问题在于，当用户登录和用户更新配置文件时，它不会显示更新的配置文件图像。它将仅显示前一张图像。当我单击注销按钮并再次登录时，它将显示更新的图像。

非常感谢您的帮助。