Angular 2, RC-маршрутизатор-выход внутри другого маршрутизатора

Я пытаюсь создать один проект с одним маршрутизатором внутри другого маршрутизатора:

Он будет работать следующим образом:

В первом маршрутизаторе-выходе он будет иметь два вида:

компонент auth (/login)
Компонент admin (/admin)

Затем во втором выводе будет внутри админ-компонента с его собственными маршрутами, которые будут отображать их:

панель управления (/admin)
Профиль (/admin/profile)
пользователи (/admin/users)

Теперь, в документах Angular 2, я вижу, что они имеют эту реализацию с использованием модулей. Но я не хочу использовать несколько модулей (или мне нужно?).

Есть ли способ сделать эту реализацию без разделения модулей?

Мне нужен компонент по умолчанию для области администрирования, поэтому мне нужен второй маршрутизатор-выход, например: на панели мониторинга будут HeaderComponent, LeftNavComponent и DashboardCompoent. Но на странице профиля будут все эти компоненты HeaderComponent и LeftNavComponent, и единственное, что изменилось, это ProfileComponent, поэтому он будет иметь в основном одну и ту же структуру. Я думаю, что мне не нужно повторять каждый импорт для каждой другой страницы администратора. Я хотел иметь только один главный админ-компонент, который будет иметь динамический контент на основе текущего маршрута.

Я уже много пробовал и обыскивал в Интернете, но единственный пример, который я смог найти, - это официальная документация Angular 2. Но они реализуют это с помощью нескольких модулей.

Ответ 1

Хотя рекомендуется использовать модули, они являются необязательными для любой навигации по маршруту.

Вы можете настроить маршрутизацию, как показано ниже, без каких-либо модулей.

app.routing

import { Routes, RouterModule }   from '@angular/router';

      import { DashboardComponent, 
         AdminComponent,
         ProfileComponent,
         UsersComponent
      } from './app.component';

      const appRoutes: Routes = [
      {
        path: '',
        redirectTo: '/dashboard/admin/users',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        children:[
        {
         path : 'admin',
         component: AdminComponent,
         children:[
           {
            path : 'users',
            component: UsersComponent
           },
           {
            path : 'profile',
            component: ProfileComponent
           }
         ]
        }
       ]
     }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

<сильные > компоненты

import { Component }          from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h3 class="title">Routing Deep dive</h3>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}


@Component({
  template: `
    <h3 class="title">Dashboard</h3>
    <nav>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class DashboardComponent {
}

@Component({
  template: `
    <h3 class="title">Admin</h3>
    <nav>
      <a routerLink="users" routerLinkActive="active" >Users</a>
      <a routerLink="profile" routerLinkActive="active" >Profile</a>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AdminComponent {
}

@Component({
  template: `
    <h3 class="title">Profile</h3>
  `
})
export class ProfileComponent {
}

@Component({
  template: `
    <h3 class="title">Users</h3>
    <hr />
  `
})
export class UsersComponent {
}

Вот Plunker!!

Надеюсь, это поможет!