离子4 +角度：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

你可以通过运行修复这个bug
npm i @ionic/angular

Answer 5

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

我将把这个问题保持开放，我们将尝试修复，但它远非微不足道，使用绝对路径是一个很好的解决方法！

我们知道这个问题:)

所以你将拥有：

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

代替：

<ion-item routerLink="home" />