Angular2 Router Navigation

Question

I'm trying to test out router navigation in my application, however each time I attempt to navigate to my url I get thrown back to the homepage.

The router should navigate to the next page when the user selects a row to complete a form, like this:

  onUserRowSelect(event): void {
    this.router.navigate(['myform']);}

However, myforms is not being navigated to, heres how I defined the routes:

    const routes: Routes = [
  {
    path: '',
    component: UserAdminComponent,
    children: [
      {
        path: 'createuser',
        component: CreateUserComponent
      },
      {
        path: 'updateuser',
        component: UpdateUserComponent,
        children: [
          {
            path: 'myform',
            component: UpdateFormComponent,
          }
        ]
      },
    ]
  },

];

So the navigate to myURL/useradmin/updateuser/myform does not work at all (if the child routes are working even).

I can elaborate more if needed. Thank you

ConnorsFan · Accepted Answer · 2018-01-02T15:38:46.603

1

If you want to navigate to a child route of the current route (e.g. from updateuser to updateuser/myform), you can use relative navigation:

import { Router, ActivatedRoute } from '@angular/router';

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

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

You can find many more navigation cases in this detailed answer by TetraDev.

Update: if the UpdateFormComponent is to replace the UpdateUserComponent when navigating, then they should both be direct children of UserAdminComponent:

  const routes: Routes = [
  {
    path: '',
    component: UserAdminComponent,
    children: [
      {
        path: 'createuser',
        component: CreateUserComponent
      },
      {
        path: 'updateuser',
        component: UpdateUserComponent
      },
      {
        path: 'myform',
        component: UpdateFormComponent
      }
    ]
  }];

and the navigation would be perform this way:

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

edited Jan 02 '18 at 15:38

answered Dec 28 '17 at 02:18

ConnorsFan

70,558
13
122
146

sorry for late reply, the url changed but the component did not render. – Mustafa Jan 02 '18 at 09:53
How do you export/import these routes? Do you use `RouterModule.forChild(routes)` (see [this article](https://toddmotto.com/angular-component-router#routermoduleforchild))? Can you show that code in the question? – ConnorsFan Jan 02 '18 at 13:47
in the same routing component: export const routing = RouterModule.forChild(routes); – Mustafa Jan 02 '18 at 14:16
And you import these routes in the component's module? – ConnorsFan Jan 02 '18 at 14:32
Its a bit complicated, I will prepare a plunkr for visibility. – Mustafa Jan 02 '18 at 15:11
By the way, do you have a `router-outlet` in your template? – ConnorsFan Jan 02 '18 at 15:19
Yeah I do, the problem now is the component is rendering on top of the other instead of replacing it. – Mustafa Jan 02 '18 at 15:20
Since `myform` is a child `updateuser`, it will appear on top of it. If you want to replace it, they should be "brothers", both children of `UserAdminComponent`. – ConnorsFan Jan 02 '18 at 15:25
oh ok, I'll try that then. But is not possible to redirect to Forms page without being brothers? Since my concept is: Navigate to List of Users, then select a user to edit their information. What I'm trying to get is to render a page to edit the user information. – Mustafa Jan 02 '18 at 15:32
I updated my answer to show the two components as brothers. I am not sure how this will integrate in the design of your application, but you can experiment with the two configurations: components as parent/child or as brothers. – ConnorsFan Jan 02 '18 at 15:40
it worked, thank you very much! So this is the only case of rendering components? child of child components cannot render each other? – Mustafa Jan 02 '18 at 15:54
I don't know all the possibilities but I always envisioned a child as rendered in a `router-outlet` of its parent. Glad to know that it worked for you! – ConnorsFan Jan 02 '18 at 15:56

score 0 · Answer 2 · answered Dec 27 '17 at 16:59

0

You should provide the complete path starting from the parent

   this.router.navigate(['useradmin','updateuser','myform']);}

answered Dec 27 '17 at 16:59

Sajeetharan

216,225
63
350
396

Angular2 Router Navigation

2 Answers2