目录
一、使用 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随着层次的深入越来越长怎么办,以后有好的方法的时候再分享。