angular navigation and validation - routes with params

Question

in my project i have some routes that accept parameters.

couple of my routes (siblings):

{
  path: '', component: HomeComponent, 
},
{
  path: 'factories', component: FactoriesComponent, canActivate: [AuthGuard], 
  resolve: [FactoriesResolverService],
  children: [
    {
      path: ':index/factory', component: DetailsFactoryComponent, canActivate: [DetailsFactoryGuard]
    },
    {
      path: ':index/factory/edit', component: EditFactoryComponent, canActivate: [DetailsFactoryGuard]
    }
  ]  
},

i have a few things that i just can't figure out how to do

after i edit the factory (example url: 'factories/3/factor/edit'), i want to navigate back to the 'factories' url.

i tried the following:

private router: Router
private route: ActivatedRoute

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

all resulting in a redirect to the home page/component (url: "")

i can't navigate using a hard path (this.router.navigate(['factories']);) because i have another path that has the ability to edit a factory and i also want to return there to the parent path (from 'details/:index/factory/edit' return to 'details')

i want to validate the "index" param - check that i have a factory that match the number, and also validate that it is a number. in case the validation fail redirect to the 'factories'/'details' path.

i tried to that via a guard but when the user refresh the page my factories data is resetting (i use NgRX state to save the data). i tried to use a resolver but the resolver only called after the guard, and i can't navigate from the guard or i end up in an infinite loop

any ideas how to implement that?

=======================

EDIT

regarding the first problem, i found a solution:

const currUrl = this.route.snapshot['_routerState'].url.substring(1).split("/"); this.router.navigate([currUrl[0]]);

currUrl will have an array with the full url - the first value of the array is the parent path

still wondering about the second problem

the wanted url is can be different depending the page im currently on, so my edit solution is fine. i think that navigate by url will do the same — guy

Ashot Aleqsanyan Ashot Aleqsanyan · Accepted Answer · 2020-01-13T22:52:14

you can just save the index as property in your class and navigate by that property

export class Component implements OnInit {
   index: string | number;

   ngOnInit() {
     this.index = this.route.snapshot.params['index'];
   }


   onNavigate() {
      this.router.navigate(['/', this.index,'factory' ]);
   }

}

angular navigation and validation - routes with params

EDIT

1 Answers