【ionic4】彻底解决本页面回到上一个页面，实现上一个页面刷新 (模态窗口到新页面,然后新页面刷新)

前言：

本页面回到上一个页面，实现上一个页面刷新算是ionic4比较难的部分了，其中踩了很多的坑，今天就彻彻底底的来解决一下这个问题！

场景直现

1、此页面为页面a，这是一个相册，总共有两张图片，下面显示的是数字2

2、此时点击这个相册，进入到页面b,对应的是相册中的两张图片，如下图

3、此时相册中的第二张图我不是很满意，想要将其删除，然后删除完回到上一个页面，也就是页面a,实现a页面刷新，如下图，数据由2变成了1

为什么会是难点

因为ionic为了提高性能将页面存到了缓存中，不能触发页面刷新，只是将上一个页面显示出来。像我们之前在 ngOnInit() {}里面以及构造函数写的方法都不会触发。它只会触发一次。

解决办法

接下来将是三个解决办法，方法一不建议，有时候会出错，方法二可以使用，但不是所有的情况都能解决，方法三是最官方最彻底的解决办法！

方法一（有时候不起作用）不建议使用

此时需要引用NavController ，并且声明一下

import { NavController } from '@ionic/angular';
constructor(
    public nav: NavController,
  ) 

方法：

back(){
    this.nav.navigateRoot(['/yemiana']);
    location.reload();
  } 

这里简单的说下为什么此方法没有效果：因为当有时候网络慢的时候，本页面还没有跳到上一个页面的时候，就执行了刷新，此时刷新的还是本页面，跳转就不起作用了。

方法二（亲测能用）但是界面会闪一下,用户体验不好

back(){
    location.replace('#/printscreenstu');
    location.reload();
   } 

方法三(用钩子函数)特别常用

这个网上对应的钩子函数特别多,这里只列出其中一个,不多解释,这个函数表达的意思就是将要进入页面的时候,触发此方法,但是它对于模态,以及登录信息的消息校验是没有用的,对tabs页面之间的切换,以及两个页面之间跳转可以起到作用

  ionViewWillEnter() {
  //这两个方法在将要进入界面的时候会触发,相当于是局部刷新,整个页面不会跟着刷新
    this.GetStuAllFirstPicture();   
    this.GetPerYearPicCount();
  }

方法四（最彻底，最官方的解决办法）使用 EventEmitter 事件驱动 实现页面通讯,可以解决所有的页面的跳转,然后页面刷新问题,消除页面整体刷新的弊端

1.新建立一个服务services

ionic g service services/event

2.安装配置EventEmitter:

npm install--save eventemitter3

3.定义公共的服务配置

import { Injectable } from '@angular/core';
import {EventEmitter} from 'eventemitter3';
@Injectable({
  providedIn: 'root'
})
export class EventService {
  public event: any;
  constructor() { 
    this.event=new EventEmitter();  //这个实例就会被多个组件共享，来实现不同页面的数据通信
  }
}

4.页面b消失的时候发送广播

先引入 : EventService

import{EventService}from'../services/event.service';

声明:

 public eventService: EventService

监听:

    //通知printscreenstu相册的页面更新信息 ,也就是上面所说的页面B
    this.eventService.event.emit('useraction');

5.页面a监听事件广播
先引入 : EventService

import{EventService}from'../services/event.service';

声明:

 public eventService: EventService

监听事件广播,通知页面a更新数据

    this.eventService.event.on('useraction', () => {
      this.GetStuAllFirstPicture();
    })

如果解决你的问题，请记得点赞欧！