web-dev-qa-db-fra.com

revenir en arrière en utilisant routerLink

J'utilise routerLink pour revenir sur ma page.

L'itinéraire actuel peut avoir 3 niveaux:

myurl.com/parent
myurl.com/parent/child
myurl.com/parent/child/grandchild

aussi, j'ai quelques composants différents, donc ce ne sera pas toujours parent, ça peut être parent1, ou parent2, aussi pour enfant et petit-enfant, par exemple:

myurl.com/parent2/child1/grandchild2

ce que je veux, c'est toujours aller au niveau précédent, par exemple:

myurl.com/parent/child/grandchild -> myurl.com/parent/grandchild

ce que j'ai fait c'est:

<button [routerLink]="['../'']">
       back
</button>

mais il accède toujours à "myurl.com"

comment puis-je le résoudre?

Comme certains utilisateurs l'ont suggéré, je partage ma configuration de routage:

dans app.routing.ts:

const APP_ROUTES: Routes = [
{
  path: '',
  canActivate: [LoggedInGuard],
  children: [
    {path: '', redirectTo: '/mainPage', pathMatch: 'full'},
    {path: 'parent', loadChildren: 'app/parent/parend.module#ParentModule'
]},
{path: '**', redirectTo: ''}
];

dans parent.routing.ts:

const PARENT_ROUTES: Routes = [
 {path: '', component: ParentComponent},
 {path: ':id', component: ChildComponent},
];

si dans le navigateur j'ai écrit:

myurl.com/parent -> it works

mais en cliquant sur le bouton de retour échoue

angularangular5angular-routerlink
4
cucuru

Si vous essayez de remonter d'un niveau, vous avez presque raison.

<a routerLink="..">Up</a>

Cela va naviguer

myurl.com/parent/child/grandchild -> myurl.com/parent/child

Cependant, si vous voulez vraiment naviguer "en arrière" comme le bouton de retour du navigateur, vous devez utiliser javascript.

Il existe une variété de réponses existantes à ce problème sur cette question StackOverflow

Pour quelque chose de plus compliqué, cela dépendra exactement de ce que vous essayez de faire - mais cela nécessitera probablement un gestionnaire de clics et une manipulation manuelle de l'URL.

13
Vlad274