angular - this.router.navigate() 没有导航到 URL
问题描述
我在 Angular 中有一个分页演示应用程序。我希望能够导航到像http://localhost:4200/page/:number
. 浏览器的 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}`]);
}
}
市政当局.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:
page.component.ts:
***
constructor() {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
***
这将允许您的组件在您(从她)导航后刷新。
希望这可以帮助!
推荐阅读
- node.js - 如何在 Cent OS 7 中清除 node.js 终端
- c# - 从 C# 驱动程序向本地托管的 Mongodb 服务器发出查询
- python - 如何添加具有不同长度的三个不同值的列?
- r - 仅使用插入符号指定最终模型的选项
- javascript - D3 - 鼠标悬停矩形宽度
- android - 应用程序间通信,如 android 中的 facebook 和 facebook messenger
- vb.net - 使用 VB.NET 检索 API JSON (https)(错误:取消请求:无法创建安全的 SSL/TLS 通道)
- javascript - nodejs的SqlTableDependency?
- .htaccess - 如何使用 .htaccess URL 伪装技术
- excel - 如何使用最后一个活动列在范围内添加列数据?(VBA excel)