Định tuyến giữa các mô-đun trong Angular 2

Question

Tôi đang viết một ứng dụng mà tất cả các tính năng đều có mô-đun riêng (Một tính năng có thể là một trang hoặc một phần của trang). Điều này bởi vì chúng tôi muốn tất cả các tính năng có logic miền riêng, dịch vụ, chỉ thị và thành phần, tức là trong mô-đun bảng điều khiển, chúng tôi có tiện ích ChartComponent mà tôi không muốn hiển thị với các chế độ xem khác như thông tin đăng nhập hoặc hồ sơ.

Vấn đề là khi làm việc với định tuyến trong Angular 2 bạn luôn định tuyến đến một thành phần cụ thể, không phải là mô-đun.

Trong trường hợp của chúng tôi, để thiết lập lộ trình cho đường dẫn: thành phần '/ bảng điều khiển': DashboardComponent, chúng tôi cần khai báo DashboardComponent trong app.module.ts và điều đó là tốt, nhưng vì chúng tôi vẫn đang trong ứng dụng mô-đun. mô-đun CharComponent của chúng tôi không được hiển thị và sẽ không hiển thị trong Bảng điều khiển của chúng tôi vì nó được khai báo trong dashboard.module.ts chứ không phải app.module.ts.

Nếu chúng tôi khai báo ChartComponent trong app.module.ts, nó hoạt động đúng mức nhưng chúng tôi đã mất kiến ​​trúc cho ứng dụng của mình.

Cấu trúc tập tin cho ứng dụng là một cái gì đó như thế này:

└─ src/ 
    └─ app/ 
     ├─ app.module.ts 
     ├─ app.component.ts 
     ├─ app.routing.ts 
     ├─ profile/ 
     | ├─ profile.module.ts 
     | └─ profile.component.ts 
     ├─ login/ 
     | ├─ login.module.ts 
     | └─ login.component.ts 
     └─ dashboard/ 
     ├─ dashboard.module.ts 
     └─ dashboard.component.ts 
      └─ chart/ 
       └─ chart.component.ts 

Answer 1

Nó chỉ ra rằng tải lười biếng không hoạt động đúng trong RC5, chỉ cần nâng cấp lên RC6 và tất cả đều hoạt động.

Answer 2

Nó không cần thiết phải nhập khẩu linh kiện vào chính (ứng dụng) mô-đun,

Nếu bạn đang tải đường lười biếng bạn chỉ có thể xác định con đường như dưới đây,

// In app module route 
{ 
path: 'dashboard', 
loadChildren: 'app/dashboard.module#DashboardModule' 
} 

// in dashboard module 
const dashboardRoutes: Routes = [ 
    { path: '', component: DashboardComponent } 
]; 

export const dashboardRouting = RouterModule.forChild(dashboardRoutes); 

@NgModule({ 
    imports: [ 
    dashboardRouting 
    ], 
    declarations: [ 
    DashboardComponent 
    ] 
}) 
export class DashboardModule { 
} 

HOẶC

Bạn có thể jus t nhập DashboardModule vào mô đun chính và nó sẽ hoạt động nếu các tuyến đường không được tải lazily.

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    DashboardModule, 
    routing 
    ], 
    declarations: [ 
    AppComponent 
    ], 
    providers: [ 
    appRoutingProviders 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
} 

Hy vọng điều này sẽ hữu ích !!

Answer 3

Mặc dù logic đó đẹp, tôi sẽ đặt tất cả các quyền trong mô-đun thành phần quản lý tài khoản để bật và tắt trong tương lai trên các tính năng, trong khi bạn không muốn người dùng của mình có tất cả các quyền mà bạn có thể muốn nâng cấp tài khoản người dùng trong tương lai. Khả năng mở rộng và thấy trước được bạn tiết kiệm thời gian từ mã hóa trong tương lai nếu hệ thống của bạn thực sự quan tâm đến logic đó.