Angular2 Router 3.0 - 设置多特征（多段）路由

Question

我正在制作一个包含两个主要部分的网站，public 部分和控制面板
所以我正在尝试做这样的事情（来自angular.io）：

这是我的代码：（有效）

app/main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app.module'
platformBrowserDynamic().bootstrapModule(AppModule)

app/app.module.ts:（我在这里声明所有部分的所有组件是..）

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { routing,appRoutingProviders } from './app.routing'

// Primary Imports
import { PrimaryComponent } from './primary/components/primary.component'
import { HomeComponent } from './primary/components/home.component'
import { LessonsComponent } from './primary/components/lessons.component'
.
.
.

// Administration Imports
import { AdministrationComponent } from './administration/components/administration.component'
import { DashboardComponent } from './administration/components/dashboard.component'
import { LessonsControlComponent } from './administration/components/lessons-control.component'
.
.
.

import { HttpModule } from '@angular/http'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule
  ],
  declarations: [
    AppComponent,
    // Primary
    PrimaryComponent,
    HomeComponent,
    LessonsComponent,
    .
    .
    .

    // Administration
    AdministrationComponent,
    DashboardComponent,
    LessonsControlComponent,
    .
    .
    .

  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

app/app.routing.ts:

import { Routes, RouterModule } from '@angular/router'
import { PrimaryRoutes } from './primary/components/primary.routes'
import { AdministrationRoutes } from './administration/components/administration.routes'

const appRoutes: Routes = [
    { path: '', redirectTo: '/primary', pathMatch: 'full'},
    ...PrimaryRoutes,
    ...AdministrationRoutes
]

export const appRoutingProviders: any[] = []

export const routing = RouterModule.forRoot(appRoutes)

app/primary/components/primary.routes.ts：（管理相同。routes.ts）

import { provideRouter, RouterConfig } from '@angular/router'
import { PrimaryComponent }    from './primary.component'
import { LessonsComponent } from './lessons.component'

export const PrimaryRoutes: RouterConfig = [
    {
        path: 'primary',
        component: PrimaryComponent,
        children: [
            { path: '', component: HomeComponent},
            { path: 'home', component: HomeComponent},
            { path: 'lessons', component: LessonsComponent },
      ]
  }
]

（我很抱歉用这些代码让你感到厌烦）

然后我有三个 router-outlet 在：

app.component.ts
primary/components/primary.component.ts
administration/components/administration.component.ts

现在这实际上工作正常，但我认为它以这种方式一次加载所有网站，所以我猜我实施它的方式是错误的或遗漏了一些东西
我想我需要有一个 primary.module.ts 和 administration.module.ts 并在其模块中声明每个部分的组件，而不是在 app.module.ts 中声明 universe，对吗？或者每个部分可能还有另外两个 main.ts 文件，但我不知道该怎么做 angular.io 中的文档也很有帮助，但找不到与此相关的内容

我希望有人可以肯定地告诉我我是否做错了，并为我提供正确方法的任何资源。谢谢。

Answer 1

我想你正在看async routing

{
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule',
}

Angular2 Router 3.0 - 设置多特征（多段）路由

Angular2 Router 3.0 - Setting up multi-features (multi sections) routing

angular2-routing

angular2-router3

angular