解决angular + Ng-Alain返回列表页刷新问题

1、添加、修改、详情页面

// 返回列表并刷新列表
import { Router, ActivatedRoute } from "@angular/router";

constructor(
    private router: Router
) { }

this.router.navigateByUrl(`/article/list?isRefresh=${new Date().getTime()}`);

2、列表页面

import { ActivatedRoute } from '@angular/router';
// 页面初始化的时候需要调用获取数据的接口
isRefresh: boolean = true;

constructor(
    private route: ActivatedRoute,
) { }

ngOnInit() { 
    this.route.queryParams.subscribe((val) => {
        if (val.isRefresh || this.isRefresh) {
            this.fetchData(); // 调用方法刷新数据
            this.isRefresh = false;
        }
    });
}

// 获取数据
async fetchData(resetPage = false) {
    if (this.isLoading) return false;
    if (resetPage) {
        this.requestParams.pageIndex = 1;
        this.requestParams.pageSize = 10;
    }
    try {
        this.isLoading = true;
        const ret = await this.articleService.getArticle(this.requestParams);
        if(ret) {
            this.data = ret.data;
            this.total = ret.total;
        }
    } finally {
        this.isLoading = false;
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,866评论 1 92
  • 吃货地图产品需求文档 V1.0-2015/03/30 1概述 1.1产品概述及目标 概述:“吃货地图”是一款基于i...
    michaelshan阅读 5,922评论 1 46
  • 产品需求文档(PRD),是一个产品项目由“概念化”阶段进入到“图纸化”阶段的最主要的一个文档,其作用是“对市场需求...
    当时不是寻常阅读 2,293评论 0 14
  • 这本书木心写的很杂,很庞大,但是却又自成系统。不管是西方的还是东方的,都发乎一个人的立场,或者说一个仁者的立场。很...
    纳兰A文若阅读 211评论 0 0
  • 今天教学了思品课第二单元“健康安全教育“第二课《珍爱自己的生命》。如何珍爱自己的生命。首先要感受生命的美好;其次要...
    微笑的花朵阅读 456评论 0 3