Ionic 4 + Angular: routerLink 只在第一次起作用

Question

我现在正在从头开发一个基本应用程序时遇到了一个奇怪的 bug。 我使用的是 Ionic 4 beta19，我已经设置了一个 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请求的订阅以检索数据。

在详细页面中，订阅路由参数并使用:id参数作为GET请求的订阅以检索数据。

- Yassine Zeriouh

---

请提供需要翻译的英文内容和相关代码，我将为您进行翻译。 - Yoarthur

@Yoarthur添加到问题中 - Yassine Zeriouh

可能与此 ion-router-outlet 问题有关：https://github.com/ionic-team/ionic/issues/16411 - Matti Lehtinen

Answer 1

这个问题已经被修复了，只需要运行npm i @ionic/angular来更新到修复版本4.2.0或更高版本。

这个问题也影响到router.navigate(['url', params])的功能。

- Lovenkrands

Answer 2

通过使用navigateByUrl来解决问题，代码如下：

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

和卡片相关的内容是：

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

目前仍不清楚为什么会出现这种情况，但是这是一个临时的解决方法。

- Yassine Zeriouh

---

我遇到了同样的问题：路由按预期工作，但只有一次。感谢您发布这个解决方法。 - briznad

我发现的另一个解决方法是，在routerLink指令中始终使用绝对URL。 - Mario

Answer 3

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

正如@mario所提到的，绝对链接将与routerLink一起使用。请参见此处的评论：https://github.com/ionic-team/ionic/issues/16534#issuecomment-444610330。

- Nicholas Pretorius

Answer 4

如果可能的话，可以采用绝对路径而不是相对路径，如this github answer中所述，这是一个解决方法：

我将保留此问题，并尝试解决，但这远非易事，使用绝对路径是一个很好的解决方法！

我们意识到这个问题 :)

因此，你需要：

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

代替：

<ion-item routerLink="home" />

- Stephane L

Answer 5

您可以通过运行以下命令来修复此错误：
npm i @ionic/angular

- felmez

---

将Ionic更新到最新版本。@Pierre.Vriens - felmez