離子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" />