Angular2 Routing: nhập submodule với định tuyến + làm cho nó tiền tố

Question

Tôi có một mô-đun chính và một số mô-đun con. Và tôi muốn chỉ định một số định tuyến không tầm thường giữa chúng.

Tôi muốn xác định các tuyến của mô-đun con trong mô-đun con. Ví dụ:

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forChild([ 
      { path: 'country', redirectTo: 'country/list' }, 
      { path: 'country/list', component: CountryListComponent }, 
      { path: 'country/create', component: CountryCreateComponent }, 
      /*...*/ 
     ]) 
    ], 
    declarations: [/*...*/], 
    exports: [ 
     RouterModule, 
    ], 
}) 
export class CountryModule {} 

Tôi muốn nhập mô-đun này với định tuyến nội bộ riêng, nhưng tôi muốn thực hiện toàn bộ định tuyến của nó.

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    /*... (basic routes)*/ 
]; 

@NgModule({ 
    imports: [ 
     /*...*/ 
     RouterModule.forRoot(appRoutes), 
     CountryModule, // <- how to make its routing prefixed?? 
    ], 
    declarations: [ 
     /*...*/ 
     AppComponent, 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

thiết lập này tạo ra các tuyến đường sau: /country, /country/list, vv, nhưng tôi muốn làm cho họ tiền tố như thế này:

• /settings/country
• /settings/country/list
• /settings/country/create

Có modu khác mà tôi muốn truy cập thông qua một định tuyến khác, ví dụ: a CityModule dưới /otherstuff/city/create và/otherstuff/city/list`.

Câu hỏi của tôi:

1. Có thể nhập một mô-đun với định tuyến riêng của mình và làm cho các tuyến đường của nó tiền tố?
2. Ngoài ra: Có cách nào để tạo liên kết giữa 2 mô-đun con theo cách thủ tục của các tuyến cuối cùng (tiền tố) không?

CẬP NHẬT

Câu trả lời được chấp nhận là cách tốt nhất để làm điều đó: tạo ra các tuyến đường trong các mô-đun, đăng ký họ ra bên ngoài. Do đó, bạn có thể sửa đổi các tuyến đường, ví dụ: tiền tố họ (đây là những gì tôi muốn), bạn có thể xác định bảo vệ, ghi đè lên hoặc lọc họ, vv

Answer 1

trong appRoutes bạn thêm đường con như

const appRoutes = [ 
    { path: '', component: HomeComponent }, 
    { 
    path: 'settings', 
    component: CountryComponent, 
    canActivate: [AuthGuard], 
    children: COUNTRY_ROUTES 
    }, 
]; 

Tạo một tuyến đường riêng biệt nộp

export const COUNTRY_ROUTES:Routes = [ 
    { path: 'country', redirectTo: 'country/list' }, 
    { path: 'country/list', component: CountryListComponent }, 
    { path: 'country/create', component: CountryCreateComponent }, 

]; 

Trong CountryComponent.html

<router-outlet></router-outlet> 

Answer 2

Chơi với các công cụ Routing này tôi chỉ tìm thấy một cách sạch sẽ tôi muốn chia sẻ, để xử lý các tuyến đường của submodules không có đau đầu và tình yêu góc hơn nữa.Lấy trường hợp OP làm ví dụ, tôi đề xuất bạn nghiên cứu mã sau:

Thêm chức năng tiện ích vào CountryModule mô-đun con, để tải động từ Bộ định tuyến và tránh cảnh báo trình biên dịch về việc thay thế chức năng mũi tên bằng tham chiếu để một chức năng xuất khẩu:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forChild([ 
     { path: 'country', pathMatch: 'full', redirectTo: 'list' }, 
     { path: 'country/list', component: CountryListComponent }, 
     { path: 'country/create', component: CountryCreateComponent }, 
    ]) 
    ], 
    declarations: [ ... ], 
    exports: [ 
    RouterModule, 
    ], 
}) 
export class CountryModule {} 

export function CountryEntrypoint() { 
    return CountryModule; 
} 

Bây giờ bạn có thể nhập mà Entrypoint vào mô-đun cha mẹ của bạn, nơi bạn muốn đặt các tuyến đường:

@NgModule({ 
    imports: [ 
    ... 
    RouterModule.forRoot([ 
     { path: '', pathMatch: 'full', component: HomeComponent }, 
     { path: 'settings', loadChildren: CountryEntrypoint } 
    ]), 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

Và có bạn đi! Giờ đây, bạn có thể tiếp cận các thành phần phụ mô-đun của mình với settings/country/list và settings/country/list.

CẢNH BÁO

Hãy cẩn thận để không nhập CountryModule vào mô-đun của cha mẹ @NgModule của bạn, bởi vì nó sẽ ghi đè lên các tuyến đường bên ngoài con đường settings. Hãy để bộ định tuyến thực hiện công việc.

Tận hưởng!