一、在使用angular8+ionic4时,需要解决返回刷新问题,使用了EventEmitter监听,方法如下:
1、Eventemitter Github地址:
https://github.com/primus/eventemitter3
2、安装配置EventEmitter:
npm install --save eventemitter3
3、定义公共的服务配置EventEmitter:
import { Injectable} from '@angular/core';
import {EventEmitter} from 'eventemitter3';
@Injectable({
providedIn: 'root'
})
export class EventService {
public eventEmit: any;
constructor() {
// 定义发射事件
this.eventEmit = new EventEmitter();
}
}
4、列表页面监听事件广播
import { EventService } from '../services/event.service';
this.eventService.eventEmit.on('getList',(result)=>{
console.log('执行');
this.getList();
})
5、详情页面返回列表页面的时候发送广播
import { EventService } from '../services/event.service';
import { Router } from '@angular/router';
back(){
this.eventService.eventEmit.emit('getList','返回之后list刷新');
this.router.navigateByUrl('/list');
}
二、存在问题,虽然数据拿到了,但是视图没有刷新,解决方法
//页面引入所需模块
import { ChangeDetectorRef } from '@angular/core';
//注入服务
constructor(public changeDetectorRef:ChangeDetectorRef ) {}
getList(){
this.http.post(url, data).subscribe((res: any) => {
this.list = res.data;
//在更改数据后不刷新的地方添加这两句话
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
}
});
}
网友评论