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

【问题标题】：Angular how to dynamically change page when changed it from the path?从路径更改页面时，Angular如何动态更改页面？
【发布时间】：2020-09-28 10:04:20
【问题描述】：

我在角度有分页问题。这是我的 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 页然后点击浏览器本身的返回按钮时，它又不会刷新。

当页面编号从路径更改或有人从浏览器本身单击返回按钮时，我应该怎么做才能刷新页面？

【问题讨论】：

标签： angular typescript angular10

【解决方案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

【讨论】：