web-dev-qa-db-fra.com

Angular 4: Le routage vers une route ne fonctionne pas

Il existe un concept fondamental de routage dans Angular 4 que je ne comprends pas.

index.html :

<base href="/">

Structure du fichier: 

- app
|- app.routings.ts
|- collections
|-- collection.component.ts
|-- collection.component.html
|-- collectioninfo.component.ts
|-- collectioninfo.component.html
|- shared
|-- header.component.html
|-- header.component.ts

J'ai un lien dans mon header.component.html:

<a class="nav-link" [routerLink]="['/collections']">
    Collections
</a>

Si je clique dessus, je débarque sur localhost: 4200/collections. Lorsque l'utilisateur clique sur un bouton, l'URL est modifiée par programme (dans collection.component.ts):

this.router.navigate(['/collections/', collection.name]);

Je me retrouve sur localhost: 4200/collections/name - tout va bien. Maintenant, je souhaite par programme revenir à/collections (dans collectioninfo.component.ts):

this.router.navigate(['/collections']);

Mais ça ne marche pas. L'URL ne change pas et j'obtiens une erreur disant qu'un paramètre n'a pas pu être chargé. Apparemment,/collections/name est chargé à nouveau. Je pensais que c'était un problème de chemin, mais des choses comme celle-ci ne fonctionnent pas non plus:

this.router.navigate(['../collections']);

Informations supplémentaires: Lorsque je recharge manuellement la page alors que je suis sur/collections, je suis de nouveau transféré vers la page d'accueil, mais je pense que c'est un autre problème qui n'est pas lié à ce comportement.

app.routing.ts :

const APP_ROUTES: Routes = [
  ...
  { path: 'collections', component: CollectionComponent },
  { path: 'collections/:id', component: CollectionInfo },
];
angulartypescriptangular2-routingangular4-router
7
user3255061

Il s'avère que mon code firebase est foiré - il essaie de recharger la page avant de passer à un autre itinéraire. Cela a provoqué une erreur, car certains paramètres transférés depuis la route précédente étaient manquants.

export const routing = RouterModule.forRoot(APP_ROUTES, { enableTracing: true })

in app.routing.ts était très utile pour le débogage.

1
user3255061

Dans votre chemin relatif, this.router.navigate(['../collections']);, vous essayez de naviguer vers localhost:4200/collections/collections. Essayez this.router.navigate(['../']);

Si cela ne fonctionne pas, fournissez également ActivatedRoute en tant que paramètre relativeTo:

constructor(route: ActivatedRoute, router: Router) {}

navigate() {
  this.router.navigate(['../'], { relativeTo: this.route });
}

relativeTo fonctionne en créant un chemin relatif à l’entrée que vous fournissez, et il n’est pas nécessairement nécessaire que ce soit l’itinéraire actuel.

3
tgrass12