0

私は2つの主要なセクション、パブリックセクションとコントロールパネルを持つWebサイトを作成している
ので、次のようなものを作成しようとしています(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/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: (administration.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 },
      ]
  }
]

（このすべてのコードであなたを退屈させて申し訳ありません）

次に、次の3つrouter-outletがあります。

  • app.component.ts
  • プライマリ/コンポーネント/primary.component.ts
  • 管理/コンポーネント/管理.コンポーネント.ts

これで実際には問題なく動作しますが、この方法ですべてのウェブサイトを一度にロードすると思うので、実装方法が間違っているか、何かが欠けている
と思います。 app.module.ts でユニバースを宣言する代わりに、各セクションのコンポーネントをそのモジュールで宣言します。または、セクションごとに他の2つのmain.tsファイルがあるかもしれませんが、それを行う方法がわかりませんでした.angular.ioのドキュメントも役立ちますが、これに関連するものを見つけることができませんでした

私が間違っているかどうかを誰かが確実に教えてくれ、正しい方法でリソースを提供してくれることを願っています. ありがとうございました。

4

1 に答える 1

1

非同期ルーティングを見ていると思います

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