Question

我在角度上有传粉的问题。这是我的html代码；

<!-- A div element for pagination part at the bottom of the page -->
<div style="margin-left: 50%; margin-top: 20px; margin-bottom: 20px">
    <ul class="pagination">
        <li class="page-item"><button class="page-link" (click)="selectedPage('Previous')">Previous</button></li>
        <li class="page-item" *ngFor="let p of page_num">
            <button class="page-link" (click)="selectedPage(p)" routerLink="/games/page/{{p}}">{{p}}</button>
        </li>
        <li class="page-item"><button class="page-link" (click)="selectedPage('Next')">Next</button></li>
    </ul>
</div>

您可以理解，这是将单击的页码发送到我的ts文件中，该文件包含这样的代码；

/*Created an element called currentPage to get the current page and send it to getGames func (my subscribe func), this element will be dynamically change, but will start from 1*/
  currentPage = 1;
  //Created a page_num cevtor that will be change when page selected
  page_num : number[] = [this.currentPage, this.currentPage+1, this.currentPage+2];

    //Created a func called selectedPage in order to adjust the page numbers and send corretc page num to funcs, all the data I am using is sotred in a vector called gamesVector
      public selectedPage(page) {
        //If clicked option was 'Previous'
        if(page == 'Previous') {
          //If previous of that page is not null
          if(this.gamesVector.previous !== null) {
            this.currentPage--;
            this.page_num = [this.currentPage, this.currentPage+1, this.currentPage+2];
            this.router.navigate(['/games/page/' + this.currentPage])
          }
          else
            alert('You are already in the first page')
        }
        //If clicked option was 'Next'
        else if(page == 'Next') {
          //If next of that page is not null
          if(this.gamesVector.next !== null) {
            this.currentPage++;
            this.page_num = [this.currentPage, this.currentPage+1, this.currentPage+2];
            this.router.navigate(['/games/page/' + this.currentPage])
          }
          else  
            alert('You are already in the last page')
        }
        //If the clicked option was a page number
        else {
          this.currentPage = page;
          this.page_num = [this.currentPage, this.currentPage+1, this.currentPage+2];
        }
    
        //Then call the games subscribe function with the new page number, so the games can be refreshed
        this.gameAndCatServ.getGames(this.currentPage).subscribe(data => {
          this.gamesVector = data;
        })
    
        //To scroll all the way up when changing the page
        window.scrollTo(0, 0)
      }

这段代码可以完美地工作，但是问题是，当有人从路径更改页码时，它不会刷新，因为我想我没有做任何两种方式的绑定，但是我无法确定这是否是正确的解决方案去做。另外，当我单击第2页，然后从浏览器本身单击“返回”按钮时，它不会再次刷新。

在更改页面编号或从浏览器本身单击“返回”按钮时，我也应该怎么做才能刷新页面？

Answer 1

假设您将路径URL设置为： http://www.mywebsite.com/section

为了反映更改路径时的更改，可以使用Angular ActivatedRoute中的“ queryParameters”。下面是一个简单的示例：

import { ActivatedRoute } from '@angular/router';

constructor(
    private readonly route: ActivatedRoute,
  ) {}

ngOnInit(): void {
  this.route.queryParams.subscribe(queryParams => {
    this.currentPage = !!queryParams['page'] ? queryParams['page'] : 1;
  });
}

现在，您可以为带有查询参数的分页设置2路绑定

http://www.mywebsite.com/section?page=10

从路径更改页面时，Angular如何动态更改页面？

1 个答案: