技术笔记

Angular8中的返回刷新

2019-08-29  本文已影响0人  随波飘雪

一、在使用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();

      }

    });

}

上一篇 下一篇

猜你喜欢

热点阅读