Angular2 RC6 - Mô-đun lồng nhau có định tuyến

Question

Trong đơn đăng ký của tôi, tôi có SupportModule trong đó có 3 mô-đun phụ (AdminModule, ChatModule, ContactModule). SupportModule và 3 mô-đun phụ của nó có định tuyến riêng của chúng.

Cấu trúc trông giống như

Định tuyến cho môi trường `AdminModule' được đưa ra dưới đây:

import { AdminComponent } from './admin.component'; 
import { RssFeedsComponent } from './rssFeeds.component'; 
import { RssFeedDetailComponent } from './rssFeedDetail.component'; 

export const adminRoutes: Route =  
    { 
     path: 'admin', 
     component: AdminComponent, 
     children: [ 
      { path: '', component: RssFeedsComponent }, 
      { path: 'feeds', component: RssFeedsComponent }, 
      { path: 'feeddetail', component: RssFeedDetailComponent } 
     ] 
    };  

và định tuyến cho SupportModule (đó là mô-đun mẹ của 3 phụ module) được đưa ra bên dưới:

import { SupportComponent } from './support.component'; 
import { SupportNavComponent } from './support-nav.component'; 
//Feature Modules 
import { chatRoutes } from './chat/chat.routing'; 
import { contactRoutes } from './contact/contact.routing'; 
import {adminRoutes} from './admin/admin.routing'; 

const supportRoutes: Routes = [  
    { 
     path: 'support', 
     component: SupportComponent, 
     children: [ 
      { path: '', component: SupportNavComponent }, 
      chatRoutes, 
      contactRoutes, 
      adminRoutes 
     ] 
    } 
]; 

export const supportRouting: ModuleWithProviders = RouterModule.forChild(supportRoutes);   

Cuối cùng, tôi sẽ nhập supportRouting vào số AppModule của mình.

Điều hướng hoạt động tốt mà không gặp bất kỳ sự cố nào. Nhưng tôi hơi bối rối. Tôi không biết liệu đây có phải là cách đúng để có các mô-đun cha-con với định tuyến riêng của chúng hay nếu có cách nào tốt hơn để đạt được điều này.

Nếu ai đó có thể sửa tôi (nếu tôi nhầm lẫn) hoặc biết cách tiếp cận tốt hơn thì điều đó thực sự hữu ích.

Answer 1

Từ đọc tài liệu của tôi, và kinh nghiệm của riêng tôi với định tuyến tương tự, những gì bạn đã làm dường như đồng ý với phong cách đề nghị của Angular.

Tôi vừa xem qua số this discussion trên github góc. Tôi đã không thử nó nhưng có vẻ như liên kết cung cấp một cách tốt hơn để làm điều này.

Tôi sẽ quay lại đây khi tôi đã dùng thử.

---

Làm theo hướng dẫn trong liên kết Lần đầu tiên tôi làm việc này VỚI tải chậm - vì đó là những gì tôi thực sự muốn.

Tôi không chắc chắn bạn đang tìm kiếm cách nào.

Với lười tải nó đi như thế này:

Hierarchy của tôi là

|--App 
| Home 
| Costing 
| | Payments 
|  | Payments List 
|  | Payments Detail 
| | Variations 
|  | ... 
| Admin 
| |--Projects 
|  |... 
| |--Users 
|  |... 
| ... 

đâu Costing, Thanh toán, Variations, quản lý, dự án và Người sử dụng có tất cả các module.

app.routing của tôi sau đó trông như thế này:

export const appRoutes: Routes =[ 
    { 
    path: '', 
    redirectTo: '/home', 
    pathMatch: 'full' 
    }, 

    { 
    path: 'home', 
    component: HomeComponent 
    }, 

    { path: 'costing', loadChildren: 'app/costing/costing.module#CostingModule' }, 

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

]; 

export const appRoutingProviders: any[] = [ 
    authProviders, 
]; 

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

costing.routing là:

const routes: Routes = [ 

    { 
    path: '', component: CostingComponent, 
    children: [ 

    { path: '', component: EmptyComponent, pathMatch: 'full' }, 
    { path: 'payments', loadChildren: 'app/costing/payments/payments.module#PaymentsModule' }, 
    { path: 'variations', loadChildren: 'app/costing/variations/variations.module#VaritionsModule' } 
    ] 
    } 
]; 

export const costingRouting: ModuleWithProviders = RouterModule.forChild(routes); 

Và cuối cùng, payments.routing:

const paymentsRoutes: Routes = [ 

    { 
    path: '', 
    component: PaymentsListComponent}, 
    { 
    path: 'detail:id', 
    component: PaymentsDetailComponent 
    }, 

]; 

export const paymentsRouting: ModuleWithProviders = RouterModule.forChild(paymentsRoutes); 

tôi chắc chắn rằng bạn có thể thay thế tải đồng bộ cho lười biếng của tôi tải.

Answer 2

Tôi đoán nó thực sự tùy thuộc vào bạn theo cách bạn muốn. Khi ngModules xuất hiện, tôi quyết định mô đun hóa mọi thứ để giữ nó lại với nhau. Tôi có một ứng dụng lớn với nhiều tuyến đường. Tôi đã đặt tất cả các tuyến đường chính để tính năng module trong app.routing như vậy:

import { Routes } from '@angular/router'; 
import { AuthGuardService } from './services/authGuard.service'; 

export const appRoutes: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full' }, 
    { path: 'home', loadChildren: './app/home/home.module#HomeModule' }, 
    { path: 'documents', loadChildren: './app/documents/documents.module#DocumentsModule' }, 
    { path: 'calculator', loadChildren: './app/calculator/calculator.module#CalculatorModule'}, 
    { path: 'food', loadChildren: './app/food/food.module#FoodModule'}, //canActivate: [ AuthGuardService ] }, 
    { path: 'themes', loadChildren: './app/themes/themes.module#ThemesModule', canActivate: [ AuthGuardService ] }, 
    { path: 'settings', loadChildren: './app/settings/settings.module#SettingsModule', canActivate: [ AuthGuardService ] }, 
    { path: 'about', loadChildren: './app/about/about.module#AboutModule' } 

]; 

export const appRoutingProviders: any[] = []; 

Sau đó, trong mỗi module tính năng tôi làm được điều này, ví dụ: home.routing.ts:

export const routing = RouterModule.forChild([ 
    { path: 'home', component: HomeComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'verify', component: VerifyComponent }, 
    { path: 'challenge', component: ChallengeComponent }, 
    { path: 'verifyEmail/:id', component: VerifyEmailComponent }, 
    { path: 'change', component: ChangeComponent }, 
    { path: 'forgot/:id', component: ForgotComponent }, 
    { path: 'verifyPassword/:id', component: ForgotVerifyComponent }, 
    { path: 'verifyUserName/:id', component: ForgotVerifyComponent } 
]); 

tôi làm điều này với mỗi mô-đun tính năng và tôi không gặp khó khăn gì với việc định tuyến và nó giữ nó theo mô-đun.