Nested child and subchild route with params

Question

I'm having troubles with nested routes. Here's my situation:

Routing:

  RouterModule.forRoot([
  {
    path: 'workerevaluation', component: MainComponent, children: [
      {
        path: 'details/:code', component: EmployeeDetailComponent, children: [
          { path: '', component: EmployeeTableComponent },
          { path: 'evaldetail/:evalid', component: EmployeeEvaluationDetailComponent }
        ]
      }
    ]
  },
]),

inside EmployeeTableComponent i have a button with a (click) that should redirect me to the 'evaldetail/:evailid' but it throws me this error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'https:/localhost:44352/workerevaluation/details/W002/evaldetail/EVAL123'

It seems to not be recognizing the 'details/:code' subpath.

Any suggestion?

this.router.navigate([document.location.href + '/evaldetail', _evaluationId]); — Elbotteon, May 27 '20 at 10:58
change it to this.router.navigate(['/evaldetail', _evaluationId]); — Aakash Garg, May 27 '20 at 10:59
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'evaldetail/EVAL123' I still need the subpath '/details/:code' in the url — Elbotteon, May 27 '20 at 11:01

Aakash Garg · Answer 1 · 2020-05-27T11:31:05.540

0

With this route config.

RouterModule.forRoot([
  {
    path: 'workerevaluation', component: MainComponent, children: [
      {
        path: 'details/:code', component: EmployeeDetailComponent, children: [
          { path: '', component: EmployeeTableComponent },
          { path: 'evaldetail/:evalid', component: EmployeeEvaluationDetailComponent }
        ]
      }
    ]
  },
]),

You should be having router-outlet in these files.

app.component.html
main.component.html
employee-detail.component.html

Working Stackblitz :- https://stackblitz.com/edit/angular-ymomja

Note in the stackblitz browser append this after url :- /workerevaluation/details/W002/evaldetail/EVAL123

edited May 27 '20 at 11:31

answered May 27 '20 at 11:09

Aakash Garg

10,649
2
7
25

With this route configuration the problem is not resolved, in addition it remove all components i have in the MainComponent when I try to navigate to 'details:code' exept for the EmployeeTableComponent – Elbotteon May 27 '20 at 11:19
so you need employee details component? – Aakash Garg May 27 '20 at 11:21
i changed my solution above, check that out. – Aakash Garg May 27 '20 at 11:25
Yes, i'll show you a preview: https://ibb.co/wJPn4CJ When i click on "Go to evaluation EVALID" it should swap component from EmployeeTableComponent (called in screen as 'evaluation table') to EmployeeEvaluationDetailComponent – Elbotteon May 27 '20 at 11:30
i changed the solution, check that out bro. – Aakash Garg May 27 '20 at 11:31
Ok, as my solution it works if i enter the url, but how to navigate there with a button? – Elbotteon May 27 '20 at 11:48
same navigation statement u was using. – Aakash Garg May 27 '20 at 11:51
the solution is the same I posted as problem, router.navigate invoked from the button is still not working... – Elbotteon May 27 '20 at 12:10
Go To Detail worked for me. – Aakash Garg May 27 '20 at 12:23
@Elbotteon check same url which i gave and go in url till W002, you will see a button. try clicking it. – Aakash Garg May 27 '20 at 12:32
ok this button works, but i don't have 15 rep to approve the answer :( – Elbotteon May 27 '20 at 12:33
no problem, but it solved your issue right? happy to help. you can't vote but you can mark it as answer bro. just click on the tick mark below votes. took me lots of effort to solve this. – Aakash Garg May 27 '20 at 12:34
yes the [routelink] in the button worked, router.navigate in the *,ts file was the problem – Elbotteon May 27 '20 at 12:46
FYI: if you want to trigger the (click) and use the router.navigate this is the solution: this.router.navigate(['../evaldetail', _evaluationId], { relativeTo: this.route }); – Elbotteon May 27 '20 at 13:43
This should not be the case – Aakash Garg May 27 '20 at 14:43
No need of ../ check same stackblitz. I have updated it. – Aakash Garg May 27 '20 at 16:15

Nested child and subchild route with params

1 Answers1