我在Angular中有一个分页演示应用程序。我希望能够导航到类似http://localhost:4200/page/:number
的URL。该URL在浏览器的URL地址栏中似乎正在更改,但是我必须按浏览器的URL地址栏中的Enter键才能实际导航到该URL并在HTML表格上进行数据更改。
此处的Stackblitz:https://stackblitz.com/edit/angular-225jrs(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>
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}`]);
}
}
municipalities.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)
})
})
}
}
答案 0 :(得分:1)
Angular路由器有一项策略,当您要从当前所在的路径导航到同一路径时,该策略会阻止您。 您可以像这样使用RouteReuseStrategy:
page.component.ts:
***
constructor() {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
***
这将使您的组件在(从她那里)导航后刷新。
希望这会有所帮助!