0

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

在此处输入图像描述

这是我的代码：（它正在工作）

应用程序/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.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.component.ts
  • 管理/组件/administration.component.ts

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

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

4

1 回答 1

1

我认为您正在查看异步路由

{
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule',
}
于 2017-01-10T06:38:36.500 回答