ionic页面返回不刷新问题

前言：

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

场景直现

从页面A进入页面B，页面B进行操作后会影响页面A数据，此时返回A页面，页面数据没有重新加载

为什么会是难点

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

解决办法

接下来将是四个解决办法，方法一不建议，有时候会出错，方法二可以使用，但不是所有的情况都能解决，方法三也比较常用，建议查看ionic生命周期函数，方法四是观察者模式EventEmitter

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

此时需要引用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

这里会创建两个文件event.service.ts和event.serveice.spec.ts

2.安装配置EventEmitter:

npm install--save eventemitter3

3.定义公共的服务配置—在event.service.ts中

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

监听:

 // B页面操作结束后，进行广播，相当于通知A页面，我（B）发生了更改注意更新
    this.eventService.event.emit('useraction');

5.页面a监听事件广播

先引入 : EventService

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

声明:

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

    this.eventService.event.on('useraction', () => {
     //更新数据 方法 内容
            ......
    })

内容转自下方链接，略有修改，在此仅作学习和分享，不做他用。

————————————————

版权声明：本文为CSDN博主「光哥_帅」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/jerry11112/article/details/91346934