angular - 重定向到 Angular 中的上一页

标签 angular parameters pagination angular2-services angular-services

我已经安装了一个名为 ngx-pagination 的包。但是我有一个问题,因为当您离开上一页并单击后退按钮时,它会将您重定向到第一页而不是返回上一页?如果我在浏览器中单击后退按钮,如何使其返回上一页?下面是我的代码。

TS

     config: any; 

     constructor() {
        this.config = {
                currentPage: 1,
                itemsPerPage: 2
            };

         this.route.paramMap
            .map(params => params.get('page'))
            .subscribe(page => this.config.currentPage = page);
            }
      }

      ngOnInit() {
            this.getAllBooks();


      }

      pageChange(newPage: number) {
           this.router.navigate(['/books'], { queryParams: { page: newPage } });
  }

        getAllBooks() {
            this.subscription = this.booksService.getAll()
            .subscribe(
                (data:any) => {
                    this.books = data;
                console.log(data);
            },
            error => {
                console.log(error);
            });
        }

HTML

<tbody>
          <tr *ngFor="let book of books | paginate: { itemsPerPage: config.itemsPerPage, currentPage: config.currentPage }">
            <td>{{ book.SKU }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.description }}</td>
         </tr>
        </tbody>
        </table>
        <pagination-controls (pageChange)=“pageChange($event)” class="my-pagination"></pagination-controls>

最佳答案

您遇到的问题是因为导航:

pageChange(newPage: number) {
    this.router.navigate(['/books'], { queryParams: { page: newPage } });
}

你不应该调用 this.router.navigate,而是直接调用它:

constructor() {
    let currentPage = localStorage.getItem('currentPage');
    this.config = {
        currentPage: currentPage ? currentPage : 1 ,
        itemsPerPage: 2
    };
}

pageChange(newPage: number) {
    localStorage.setItem('currentPage', newPage);
    this.config.currentPage = newPage;
}

关于angular - 重定向到 Angular 中的上一页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48217600/

相关文章:

parameters - F#管道第一个参数

php - WordPress的category.php页面分页显示404页面

angular - 如何修复我的 Angular 测验应用程序中多选题的评分问题?

angular - 巢JS : return a string

JavaScript 闭包问题

jquery - 有什么方法可以在 Django 中序列化分页对象吗?

ios - Swift tableView 分页

angular - 如何以 Angular 5 获取基本网址?

html - 使用<template ngFor>代替* ngFor时出现奇怪的间隙

android - 如何使用 Gradle 命令行为 Android Studio 动态创建或设置 BuildConfigField