ionic 4 + angular: routerLink 只在第一次工作

Question

我现在在从头开发基本应用程序时遇到了一个奇怪的错误。我使用 Ionic 4 beta 19 并将 routerLink 放到另一个页面，路由在基页模块中设置如下：

RouterModule.forChild([
  { path: '', component: NewsPage },
  { path: ':id', component: DetailPage }
])

routerLink 属性设置在卡片上，点击卡片时它工作正常，但当我返回并按下同一张卡片或另一张卡片时，路由器根本不做任何事情。我没有收到任何错误，浏览器中的 URL 运行正常。怎么会这样？

编辑：另外，DetailPage 没有模块，所以它基本上只是一个页面。

编辑：卡片代码如下所示：

<ion-card *ngFor="let item of items;" [routerLink]="[item.id]">
  ...
</ion-card>

在详情页面中，路由参数被订阅，:id 参数将用于 GET 请求订阅以检索数据

Answer 1

通过使用 navigateByUrl 解决了这个问题，而不是像这样：

open(id: number) {
  this.router.navigateByUrl(this.router.url + '/' + id);
}

对于卡片：

<ion-card *ngFor="let item of items;" (click)="open(item.id)">
    ...
</ion-card>

仍然不知道为什么会这样，但这是目前的解决方法。

Answer 2

这是一个已知错误。您可以在此处找到 GitHub 问题：https://github.com/ionic-team/ionic/issues/16534。

正如@mario 上面提到的，绝对链接将适用于 routerLink。请参阅此处的评论：https://github.com/ionic-team/ionic/issues/16534#issuecomment-444610330

Answer 3

这已经修复，只需运行 npm i @ionic/angular 更新到修复版本 4.2.0 或更高版本。

这也影响了 router.navigate(['url', params]) 功能

Answer 4

您可以通过运行
修复此错误 npm i @ionic/angular

Answer 5

如果可能，解决方法是使用绝对路径而不是 this github answer 中所述的相对路径：

I will leave this issue open, and we will try to fix, but it's far from trivial and using absolute paths is a good workaround!

We are aware of this issue :)

所以你将拥有：

<ion-item routerLink="/home" />

而不是：

<ion-item routerLink="home" />

ionic 4 + angular: routerLink 只在第一次工作

ionic 4 + angular: routerLink only works first time

angular-routing

ionic-framework

angular

ionic4