以 Angular 重定向到上一页 [英] Redirect to Previous Page In Angular

问题描述

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

<块引用>

TS

 配置:任意；构造函数(){this.config = {当前页面:1，每页项目数: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().订阅((数据:任何)=>{this.books = 数据；控制台日志(数据)；},错误 =>{控制台日志(错误)；});}

<块引用>

HTML

<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><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 = {当前页:当前页?当前页面:1，每页项目数:2};}pageChange(newPage: number) {localStorage.setItem('currentPage', newPage);this.config.currentPage = newPage;}

I have installed a package called ngx-pagination. But i have a problem since when you navigate away from the previous page and you click the back button, it redirects you to the first page instead of going back to the previous page? How can i make it return to the previous page if i click the back button in the browser? Here's my code below.

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>

解决方案

The issue you are facing is because of navigation :

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

You should not call this.router.navigate, instead of that directly call it like :

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 重定向到上一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！