Angular2 Organizing routing module

Question

Here us my routing module.

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: "",
                component: AdminComponent,
                children: [
                    {
                      path: "users",
                      component: ParentComponent
                      children: [
                        {
                          path: ":id",
                          component: AnotherComponent
                         }
                      ]
                    }
                ]
            }]
        )
    ],
    exports: [
        RouterModule
    ]
})

export class AdminRoutingModule {}

By doing so, I need to specify in my ParentComponent a <router-outlet></router-outlet>. The only problem here is that AnotherComponent isn't a part of ParentComponent, these are two different pages. So maybe a better structure would be to have them at the same level. The reason why I went for the that structure was because AnotherComponent can only be reached from the ParentComponent. What's the most sensible thing to do in here ?

Shouldn't it be a problem? also what is the code for components? — Roman C
– Roman C, Commented Jan 31, 2017 at 10:42

slaesh · Accepted Answer · 2017-01-31 12:28:18Z

1

So as you already mentioned in your question, your router-config should look like this:

RouterModule.forChild([{
    path: "",
    component: AdminComponent,
    children: [
        {
          path: "users",
          component: ParentComponent
        },
        {
          path: "users/:id", /* OR WHATEVER .. */
          component: AnotherComponent,
          /* OPTIONAL GUARD */
          canActivate: [YourRouteGuard]
        }
    ]
}])

How and where you place your routerLink's is your part! :)

If you want to "protect" routes, you should use Guards!

https://angular.io/docs/ts/latest/guide/router.html#!#milestone-5-route-guards

edited Jan 31, 2017 at 12:28

answered Jan 31, 2017 at 11:05

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faly · Accepted Answer · 2017-01-31 11:09:11Z

0

Putting AnotherComponent at the same level as ParentComponent doesn't prevent AnotherComponent to be only reached from ParentComponent.

answered Jan 31, 2017 at 11:09

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular2 Organizing routing module

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related