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

1. 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')

2. 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

Answer 1

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' ]);
   }

}