Angular 2，另一个路由器 socket 内的RC5路由器 socket

Question

我正在尝试用一个路由器 socket 在另一个路由器 socket 内制作一个项目:

它将像这样工作:

在第一个路由器 socket 中，它将有两个 View :

• auth 组件 (/login)

• 管理组件(/admin)

然后在第二个导出将在管理组件内，有自己的路线，将呈现这些:

• 仪表板 (/admin)

• 个人资料 (/admin/profile)

• 用户 (/admin/users)

现在，在 Angular 2 文档中，我可以看到他们使用模块实现了这种实现。但我不想使用多个模块(或者我必须使用？)。

有没有办法在不分离模块的情况下实现这个实现？

我想要管理区域的默认组件，这就是为什么我想要第二个路由器导出，例如:仪表板将具有 HeaderComponent、LeftNavComponent 和 DashboardCompoent。但是个人资料页面也会有所有这些 HeaderComponent 和 LeftNavComponent，唯一会改变的是 ProfileComponent，所以它的结构基本相同。我想我不需要为每个不同的管理页面重复每次导入。我只想拥有一个主要的管理组件，它将具有基于当前路由的动态内容。

我已经在互联网上尝试和搜索了很多次，但我能找到的唯一示例来自 Angular 2 官方文档。但是他们正在使用多个模块来实现这一点。

Answer 1

虽然模块是推荐的，但它们对于任何路线导航都是可选的。

您可以在没有任何模块的情况下像下面这样配置路由。

应用路由

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 !!