Ionic4--返回上一页刷新

目录

一、使用 Ionic 内置的生命周期

二、使用广播的方式

三、添加返回参数

四、添加回调函数

---

一、使用 Ionic 内置的生命周期

每次进入页面都刷新。当然每次进入就刷新不太好，浪费了流量，有列表的话也不在上次浏览的位置。

ionViewWillEnter() {
}

二、使用广播的方式

1.引入包  npm install --save eventemitter3

2.创建服务

import { Injectable} from '@angular/core'; 
import {EventEmitter} from 'eventemitter3'; 

@Injectable({
	providedIn: 'root' 
})
export class EventService { 
    public eventEmit: any; 
    constructor() {
	// 定义发射事件
	this.eventEmit = new EventEmitter(); 
    }
}

3.   A页面监听返回

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

this.eventService.eventEmit.on('reloadAList',(result)=>{ 
    console.log('执行');
})

4.   B页面发出广播

import { EventService } from '../services/event.service'; 
ionViewDidLeave(){
	this.eventService.eventEmit.emit('reloadAList','刷新页面'); 
}

三、添加返回参数

1、A页面使用 ActivatedRoute 接收参数

import { ActivatedRoute } from '@angular/router';
constructor(public activatedRoute: ActivatedRoute,){
    this.activatedRoute.queryParams.subscribe((params: any) => {
        if (params["reload"]=="T") this.getData()//如果有刷新标识的话，就调用刷新方法
    })
}

2、B页面使用.navigateBack("/letter?reload=T")添加刷新标识

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


onClickPublish() {
    this.navController.navigateBack("/letter?reload=T");//返回上个页面，路由添加刷新参数
}

goBack() {//导航栏返回按钮直接返回
    this.navController.navigateBack("/letter");
}

注意：

//在这里写网络请求是因为，需要获取从上个页面传过来的参数
//为什么不在这个方法里获取参数，然后在 ngOnInit()请求网络呢?
//是因为在某些安卓手机上，如果网络请求写在ngOnInit()里面，有时候上个页面传过来的参数获取不到
//这边网络请求加了个判断，是为了防止返回的时候走两遍刷新
//如果上个页面没有参数传过来，可以把网络请求写在 ngOnInit(),这个方法只走一次

constructor(){
    this.activatedRoute.queryParams.subscribe((params: any) => {  
          if (params["id"]) {网络请求}
     })
}


//当然这样写是可以的，ngOnInit应该就是用来请求数据的
ngOnInit(){
   this.activatedRoute.queryParams.subscribe((params: any) => {  网络请求 })
}

四、添加回调函数

1、A 页面设置如下

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


addStarAction() {
    this.navController.navigateForward('/star-add', {
      queryParams: {
        ///传入事件，接收回传参数
        callback: () => this.callbackAction()
      },
    });
}

callbackAction() {
    //刷新数据
}

2、B页面设置如下

import { ActivatedRoute, Params } from '@angular/router';

 public callNewBack: any;

constructor(public activatedRoute: ActivatedRoute,){

    this.activatedRoute.queryParams.subscribe((params: Params) => {
      this.callNewBack = params.callback;
    });
}

addSuccessAction() {
    if (this.callNewBack) {
      this.callNewBack();
    }
    this.goBack();
}

goBack() {
    this.navController.back();
}

 

当然还有其他的方法：比如B页面保存一个值，A页面在每次进入的时候检查这个值有没有改变，改变就去刷新。

还有一些传参的问题需要解决，比如returnUrl随着层次的深入越来越长怎么办，以后有好的方法的时候再分享。