Angular 2，RC5路由器插座内另一个路由器插座

Question

我正在尝试用另一个路由器插座内的一个路由器插座制作一个项目：

它会像这样工作：

在第一个路由器插座中，它将有两个视图：

• auth组件（/ login）
• 管理组件（/ admin）

然后在第二个出口将在admin组件内部，具有自己的路由，将呈现这些：

• 仪表板（/ admin）
• 个人资料（/ admin /个人资料）
• 用户（/ admin / users）

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

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

我想要管理区域的默认组件，这就是我想要第二个路由器插座的原因，例如：仪表板将具有HeaderComponent，LeftNavComponent和DashboardCompoent。但是配置文件页面也将包含所有这些HeaderComponent和LeftNavComponent，并且唯一可以改变的是ProfileComponent，因此它将具有基本相同的结构。我想我不需要为每个不同的管理页面重复每次导入。我想只有一个主要的管理组件，它将具有基于当前路由的动态内容。

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

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

希望这可以帮助！！

Answer 2

使用延迟加载的模块添加解决方案。这是根据标题而不是原始问题的正文的通用答案。

我为包含UserCheckinModule和Login页面/组件的非登录用户创建了一个名为Signup的独立模块，因为它们通常共享通用设计和功能/服务。

在app.routing.module.ts中定义的路由 -

const routes: Routes = [
  { path: 'user', loadChildren: './user-checkin/user-checkin.module#UserCheckinModule' },
  { path: '**', redirectTo: 'user' }
];

在user-checkin.-routing.module.ts中为UserCheckin模块定义的路由 -

const routes: Routes = [
  {
    path: '',
    component: CheckinComponent, // base template component
    children: [
      { path: '', redirectTo: 'login' },
      { path: 'login', component: LoginComponent },
      { path: 'signup', component: SignupComponent },
      { path: '**', redirectTo: 'login' }
    ]
  }
];

app.component.html已经包含一个router-outlet，并作为整个应用程序的基本模板/布局。 UserCheckinModule是一个子模块，有自己的路由和基本模板。

checkin.component.html基本模板的内容 -

<router-outlet></router-outlet>