web-dev-qa-db-fra.com

ionic 4 + angulaire: routerLink ne fonctionne que la première fois

J'ai un bug bizarre en développant une application de base à partir de zéro en ce moment. J'utilise Ionic 4 beta 19 et j'ai mis un routerLink vers une autre page, l'itinéraire est configuré dans le module des pages de base comme ceci:

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

l'attribut routerLink est défini sur une carte et cela fonctionne très bien lorsque vous cliquez sur une carte, mais quand je reviens en arrière et que j'appuie sur cette même carte ou sur une autre, le routeur ne fait rien du tout. Je ne reçois aucune erreur et l'URL dans le navigateur fonctionne parfaitement. Comment se peut-il?

Edit: De plus, DetailPage n'a pas de module, c'est donc simplement une page.

Modifier: le code de la carte ressemble à ceci:

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

Dans la page de détails, les paramètres de route sont abonnés et le paramètre: id sera utilisé pour un abonnement à la demande GET pour récupérer les données

angularionic-frameworkangular-routingionic4
10
Yassine Zeriouh

Ceci est déjà corrigé, exécutez simplement npm i @ionic/angular Pour effectuer la mise à jour vers la version de réparation 4.2.0 ou supérieure.

Cela affectait également la fonctionnalité router.navigate(['url', params])

4
Lovenkrands

Résolu en utilisant navigByUrl à la place comme ceci:

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

et pour la carte:

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

Je ne sais toujours pas pourquoi cela se produit, mais cela fonctionne comme solution de contournement pour l'instant.

4
Yassine Zeriouh

C'est un bug connu. Vous pouvez trouver le problème GitHub ici: https://github.com/ionic-team/ionic/issues/16534 .

Comme le mentionne @mario ci-dessus, les liens absolus fonctionneront avec routerLink. Voir le commentaire ici: https://github.com/ionic-team/ionic/issues/16534#issuecomment-4446103

2
Nicholas Pretorius

Si c'est possible, une solution consiste à utiliser un chemin absolu au lieu d'un chemin relatif comme indiqué dans cette réponse github :

Je vais laisser ce problème ouvert, et nous allons essayer de le résoudre, mais ce n'est pas anodin et utiliser des chemins absolus est une bonne solution!

Nous sommes conscients de ce problème :)

Vous aurez donc:

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

au lieu de :

<ion-item routerLink="home" />
1
Stephane L

vous pouvez corriger ce bogue en exécutant
npm i @ionic/angular

0
felmez