RC5：異なるルータ出口でのNgModuleのレイジーローディング

Question

私はRC5のNgModuleを使って動的ルートロードを行っています。

マイアプリには2つの深度があります。私のようなルートを持っている：

• アプリ/ログイン
• アプリ/ダッシュボード/モジュール1
• アプリ/ダッシュボード/モジュール2
• などを...

各dephレベルは、それが自分のルータのしています - アウトレットので、私は各レベルでカスタムレイアウトを定義することができます。つまりログインとダッシュボードはアプリのルータ出口に表示され、module1とmodule2はダッシュボードのルータ出口に表示されます。

各ルートをオンデマンドで動的にロードする設定とは何ですか？

Answer 1

ここには、ダイナミックローディングアロスNgModulesとルータコンセントの最小の実例があります。

app.module.ts

@NgModule({ 
    declarations: [AppComponent], 
    imports: [ 
     RouterModule, 
     routing], 
    bootstrap: [AppComponent], 
    providers: [ 
     // some providers 
    ] 
}) 

export class AppModule { } 

app.component.ts

@Component({ 
    template: '<router-outlet></router-outlet>' 
}) 
export class BadAppComponent { } 

/loginと/dashboardをレイアウトする予定です<router-outlet>。

app.routes.ts

export const routes: Routes = [ 
    {path: '', redirectTo: '/login', terminal: true}, 
    {path: 'login', component: LoginComponent}, 
    {path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'} 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 

loadChildrenポイントオンデマンドでロードされるモジュールへ。

dashboard.module.ts

@NgModule({ 
    declarations: [ 
     DashboardComponent 
    ], 
    imports: [CommonModule, RouterModule, routing], 
    exports: [DashboardComponent], 
    providers: [ 
     // some providers 
    ] 
}) 
export class DashboardModule { } 

dashboard.component.ts /dashboard/accountsと/dashboard/transfertがレイアウトされたことしようとしている

@Component({ 
    moduleId: module.id, 
    template: '<div>sidebar left</div><router-outlet></router-outlet><div>sidebar right</div>', 
}) 
export class DashboardComponent { 
    constructor() {} 
} 

<router-outlet>。あなたは、ルータ、アウトレットに

export const routing: ModuleWithProviders = RouterModule.forChild([ 
    {path: '', component: DashboardComponent, 
     children: [ 
      { path: 'accounts', loadChildren: 'app/dashboard/accounts/accounts.module#DashboardAccountsModule'}, 
      { path: 'virement', loadChildren: 'app/dashboard/transfert/transfert.module#DashboardTransfertModule'} 
     ] 
    } 

]); 

children

は子供のルートが現在の <router-outlet>すなわちダッシュボードのルータoutler

accounts.moduleにロードされていることを保証

dashboard.routes.tsに名前を付けるべきではありません。 ts

@NgModule({ 
    declarations: [ 
     AccountsFragment 
    ], 
    imports: [CommonModule, RouterModule, routing], 
    exports: [AccountsFragment] 
}) 
export class DashboardAccountsModule { } 

accounts.routing。ts

export const routing: ModuleWithProviders = RouterModule.forChild([ 
    { path: '', component: AccountsComponent} 
]); 

これは経路の終わりです。それは、ダッシュボードの子供のルートなので、ダッシュボードのルータアウトレットに表示されます。それである

accounts.component.ts

@Component({ 
    moduleId: module.id, 
    template: '<div>Your accounts!!</div>' 
}) 
export class AccountsComponents { 
} 

。 「ロードアズ・ゴー」アプリケーションを構築するために必要なものはすべて必要です。 お手伝いをしてください。