this.router.navigate() 不导航到 URL [英] this.router.navigate() doesn't navigate to the URL
问题描述
我有一个 Angular 的分页演示应用程序.我希望能够导航到像 http://localhost:4200/page/:number
这样的 URL.URL 在浏览器的 URL 地址栏中似乎正在更改,但我必须在浏览器的 URL 地址栏中按 Enter 键才能实际导航到 URL 并更改 HTML 表上的数据.
I have a pagination demo application in Angular. I am expecting to be able to navigate to a URL like http://localhost:4200/page/:number
. The URL appears to be changing in the browser's URL address bar but I have to press Enter key on the browser's URL address bar in order to actually navigate to the URL and have the data change on the HTML table.
Stackblitz 在这里:https://stackblitz.com/edit/angular-225jrs(HttpErrorResponse
不是问题的一部分,但我不知道如何在 Stackblitz 中解决这个问题).这是我的代码:
Stackblitz here: https://stackblitz.com/edit/angular-225jrs (HttpErrorResponse
is not part of the question, but I don't know how to fix that in Stackblitz). Here is my code:
page.component.html:
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:
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:
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)
})
})
}
}
推荐答案
Angular 路由器有一项策略可以阻止您从当前所在的路由导航到同一路由.您可以像这样使用 RouteReuseStrategy:
There is a policy with Angular router that prevents you when you want to navigate to the same route from the one that you are currently in. You could use RouteReuseStrategy like this:
page.component.ts:
page.component.ts:
***
constructor() {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
***
这将允许您的组件在您导航到她(来自她)后刷新.
This will allow your component to refresh after you navigate on her (from her).
希望这会有所帮助!
这篇关于this.router.navigate() 不导航到 URL的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!