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

希望这可以帮助!!