Angular 这个.router.navigate（）不'；t导航到URL

我在Angular中有一个分页演示应用程序。我希望能够导航到像

http://localhost:4200/page/:number

。浏览器的URL地址栏中的URL似乎正在更改，但我必须按浏览器URL地址栏上的Enter键才能实际导航到URL并更改HTML表中的数据

Stackblitz这里：（

HttpErrorResponse

不是问题的一部分，但我不知道如何在Stackblitz中解决这个问题）。这是我的密码：

page.component.html：

<span *ngFor="let x of fakeArray; let index = index">
  <button type="button" class="btn btn-primary" (click)="goToPage(index)">{{ index + 1 }}</button>
</span>

<br><br>

<table class="table">
  <thead>
    <tr>
      <th>Alue-ID</th>
      <th>Kunta</th>
      <th>Lääni</th>
      <th>Maakunta</th>
      <th>Seutukunta</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let municipality of municipalities">
      <td>{{ municipality.alue_id }}</td>
      <td>{{ municipality.kunta }}</td>
      <td>{{ municipality.laani }}</td>
      <td>{{ municipality.maakunta }}</td>
      <td>{{ municipality.seutukunta }}</td>
    </tr>
  </tbody>
</table>

<span *ngFor="let x of fakeArray; let index = index">
  <button type="button" class="btn btn-primary" (click)="goToPage(index)">{{ index + 1 }}</button>
</span>

<br><br>

.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { municipality } from './municipality.interface';

@Injectable()
export class MunicipalitiesService {

  constructor(private http: HttpClient) { }

  getOneHundredRecords = (page: number) => {
    return new Promise((resolve, reject) => {
      this.http.get("/assets/data.json").subscribe((data: municipality[]) => {
        let municipalities = data;
        let index = 0;
        let toBeReturned: municipality[] = [];

        for (let municipality of municipalities) {
          if (index >= (page * 100) && index < (page + 1) * 100) {
            toBeReturned.push(municipality);
          }
          index++;
        }
        resolve(toBeReturned)
      })
    })
  }

  getPageCount = () => {
    return new Promise((resolve, reject) =>  {
      this.http.get("/assets/data.json").subscribe((data: municipality[]) => {
        let municipalities = data;
        let index = 0;

        for (let municipality of municipalities) {
          index++;
        }

        let pageCount = Math.ceil(index / 100);
        resolve(pageCount)
      })
    })
  }

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“/unicity.interface”导入{unicity}；
@可注射（）
出口级市政服务{
构造函数（私有http:HttpClient）{}
GetOneHundRecords=（页码）=>{
返回新承诺（（解决、拒绝）=>{
this.http.get（“/assets/data.json”）.subscribe（（数据：市政[]）=>{
让城市=数据；
设指数=0；
让我们返回：市政当局[]=[]；
对于（城市中的直辖市）{
如果（索引>=（第100页）和索引<（第+1页）*100）{
toBeReturned.push（市政府）；
}
索引++；
}
解决（待解决）
})
})
}
getPageCount=（）=>{
返回新承诺（（解决、拒绝）=>{
this.http.get（“/assets/data.json”）.subscribe（（数据：市政[]）=>{
让城市=数据；
设指数=0；
对于（城市中的直辖市）{
索引++；
}
设pageCount=Math.ceil（index/100）；
解析（页面计数）
})
})
}
}

当您想从当前所在的路线导航到同一条路线时，Angular router有一个策略可以阻止您。 您可以像这样使用RouterUse策略：

page.component.ts：

import { Component, OnInit } from '@angular/core';
import { MunicipalitiesService } from '../municipalities.service';
import { municipality } from '../municipality.interface';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class PageComponent implements OnInit {

  municipalities: municipality[] = [];
  pagenumber: number;
  fakeArray: any;

  constructor(
    private service: MunicipalitiesService, 
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.pagenumber = +params.number;
    })

    this.service.getOneHundredRecords(this.pagenumber).then((data: municipality[]) => {
      this.municipalities = data;
    });

    this.service.getPageCount().then((pageCount: number) => {
      this.fakeArray = new Array(pageCount);
    })
  }

  goToPage = (index: number) => {
    this.router.navigate([`/page/${index}`]);
  }

}

***

constructor() {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

***

这将允许您的组件在您（从她）导航后刷新

---

希望这有帮助

从技术上讲，您仍然处于到同一组件的同一路线上，因此它不会重新加载。您可以通过以下操作强制重新加载：

this.router.navigate（[

/page/${index}

]）。然后（（）=>window.location.reload（））导航

操作，不如通过

goToPage（）

方法获取新的集合数据。您救了我，我花了大约两天的时间才让它工作！但现在模态窗口打开两次。但可能是我们的一些应用程序错误。很高兴我能帮上忙：）