Nested modules/components in Angular 2/4

Question

I have this structure:

App/dashboard/dashboard.module.ts
App/dashboard/dashboard.component.ts
App/dashboard/dashboard.component.html
App/dashboard/routes.ts
App/app.module.ts
App/app.component.ts
App/app.component.html

Inside the app/dashboard folder there is another sub component. On the dashboard.component.html are the

With this approach, how to import a service that I can use on the sub components of dashboard? If I use [providers] on app.module.ts can it be accessed on the rest of the modules/components? And, if I want a new component at the same level of app.module.ts, can I use the router-outlet of the dashboard.component?

Unknown Unknown · Accepted Answer · 2017-04-08T12:27:01

Nested is achieved with router

You have routes.ts in this module you create new path, add component and add children:

    const crisisCenterRoutes: Routes = [
  {
    path: 'index',
    component: BaseComponent,
    children: [
      {
        path: 'main',
        component: ChildComponent,
        children: [
          {
            path: ':id',
            component: ChildChildComponent
          }
        ]
      }
    ]
  }
];

In BaseComponent template.html add <router-outlet></router-outlet>:

<div>..html..  <router-outlet></router-outlet>  </div>

by parity of reasoning in ChildComponent in template add <router-outlet></router-outlet>

you nested success

Nested modules/components in Angular 2/4

2 Answers