Reputation: 2210
I'm attempting to break my app apart into smaller modules in Angular 2. I got the module part down and I'm attempting to move the routes to each module. Everything seems to be going ok, except, my active route component doesn't seem to be wrapped in the parent modules component. Let me try to explain.
When you have one module in Angular (app.module.ts), you usually have a component by the same name (app.component.ts). The app.component contains a tag which lets angular know where to insert the active route view. Now let's say I have a module called admin.module. I would like to have a component called admin.component that wraps any of the active components under it, just like the app.component does for routes under app.module.
I essentially want a template for each module along the way. Hitting the company edit route of my application, I'd like:
App.module (using app.component.html)
Admin.module (using admin.component.html)
Company.module (using company.component.html)
Company-Edit.component (using company-edit.component.html)
Am I thinking about this the wrong way, or is this totally possible, but I'm missing something?
UPDATE: I feel like I'm not being specific enough so here's some code. Here's a link to a plnkr I created. When clicking the "admin page" link I would like the admin.component's html wrapping the admin-page.component's html
https://plnkr.co/edit/XhlLJId6Ua8At5z1ZNlz?p=preview
Upvotes: 0
Views: 1645
Reputation: 60518
When you have a child router outlet, you need to define a child route. I modified your plunker as follows:
RouterModule.forChild([
{
path: 'admin',
component: AdminComponent,
children: [
{ path: 'page', component: AdminPageComponent }
]
}
])
],
I updated the plunker here: https://plnkr.co/edit/AdUZ34JGwp4o4cpYrNuy?p=preview
And to not get in trouble with the SO police, I won't mention that I also have a routing course that may help you.
Upvotes: 1
Reputation: 60518
You can set up multiple route hierarchies to manage your routes.
App Component
<router-outlet></router-outlet> // <-Regular or admin goes here
- Regular site component
<header></header>
<menu></menu>
<router-outlet> // <-Regular features get routed here
<footer></footer>
- Admin site component
<admin-header></admin-header>
<router-outlet> // <-Admin features get routed here
<admin-footer></admin-footer>
Upvotes: 0