美文网首页技术笔记
Angular8中的返回刷新

Angular8中的返回刷新

作者: 随波飘雪 | 来源:发表于2019-08-29 15:23 被阅读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();

      }

    });

}

相关文章

网友评论

    本文标题:Angular8中的返回刷新

    本文链接:https://www.haomeiwen.com/subject/fbpiectx.html