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

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

作者: myzony | 来源:发表于2019-05-23 16:28 被阅读0次

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;
    }
}

相关文章

网友评论

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

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