góc 2 - tuyến submodule và lồng <Router-ổ cắm>

Question

Tôi đang tìm kiếm một giải pháp với góc 2 cho kịch bản giải thích dưới đây:

Trong kịch bản này, top-nav chứa các liên kết để tải submodules và sub-nav có các liên kết để cập nhật nội dung của submodule.

Các URL nên bản đồ như:

• /home => tải trang nhà trong thành phần chính ổ cắm Router
• /submodule => tải submodule trong ổ cắm phần router chính và theo mặc định sẽ hiển thị trang chủ của submodule và navbar phụ
• /submodule/feature => tải các tính năng bên trong ổ cắm router của submodule

các module ứng dụng (và thành phần ứng dụng) chứa một đầu thanh điều hướng để điều hướng đến các mô-đun con khác nhau và mẫu thành phần ứng dụng có thể trông giống như thế này

<top-navbar></top-navbar> 
<router-outlet></router-outlet> 

Nhưng đây là sự phức tạp. Tôi cần submodules của tôi để có bố trí tương tự với một thanh nav cấp thứ hai và ổ cắm router riêng của họ để tải các thành phần riêng của họ.

<sub-navbar></sub-navbar> 
<router-outlet name='sub'></router-outlet> 

Tôi đã thử mọi lựa chọn và tìm kiếm khắp nơi nhưng không thể tìm ra một giải pháp để có một mẫu mặc định (như thành phần ứng dụng) trong submodule với ổ cắm router và cũng tải các nội dung của submodule trong các bộ định tuyến bên trong đầu ra mà không làm mất sub-nav.

Tôi sẽ đánh giá cao mọi đầu vào hoặc ý tưởng

Answer 1

Trang html sẽ trông như thế này.

Main Page

<top-navbar></top-navbar> 
<router-outlet></router-outlet> 

Sub Mô-đun Trang

<sub-navbar></sub-navbar> 
<router-outlet name='sub'></router-outlet> 

trên cách nhấn vào menu trong thanh top-nav ổ cắm tuyến đường chính sẽ tuyến đường receptively.

trong khi nhấp vào thanh điều hướng phụ, đầu ra bộ định tuyến [phụ] sẽ định tuyến tương ứng.

HTML là tốt, lừa sẽ được đưa ra tại văn app.routing

app.routing.ts

const appRoutes: Routes = [ 
    { 
    path: 'login', 
    component: LoginComponent 
    }, 
    { path: 'home', 
    component: homeComponent, 
    children: [ 
     { 
     path: 'module1', 
     component: module1Component, 
     children: [ 
      { 
      path: 'submodule11', 
      component: submodule11Component, 
      } 
      { 
      path: '', 
      redirectTo: 'submodule11', 
      pathMatch: 'full' 
      } 
     ] 
     }, 
     { 
     path: 'module2', 
     component: module2omponent, 
     children: [ 
      { 
      path: 'submodule21', 
      component: submodule21Component, 
      }, 
      { 
      path: '', 
      redirectTo: 'submodule21', 
      pathMatch: 'full' 
      } 
     ] 
     } 
     ] 
     }, 
     { 
     path: 'about', 
     component: aboutComponent 
     } 
] 

Hy vọng nó sẽ giúp bạn.

Chi tiết https://angular.io/docs/ts/latest/guide/router.html

Answer 2

bạn có đề cập đến tên ổ cắm ở các tuyến đường đề cập đến tên ổ cắm router của bạn trong định tuyến như thế này "ổ cắm: 'phụ"

routes: Routes = [ 
 
    {path:'', redirectTo: 'login', pathMatch: 'full'}, 
 
    { 
 
    path: 'login', 
 
    component: LoginComponent, 
 
    
 
    }, 
 
    { path: 'home', 
 
    component: AppComponent, 
 
     children: [ 
 
     {path: 'home/pdf',component: SideMenuPage,outlet:"sub" }, 
 
     {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"}, 
 
     ]}, 
 
    
 

 
]; 
 
    

Answer 3

Sử dụng:

RouterModule.forChild() 
... 
<router-outlet name="sub"></router-outlet> 
... 
[routerLink]="[{ outlets: { sub: [subRouteName] } }]" 

Ví dụ đầy đủ:

HTML

<div class="tabs tinyscroll"> 
    <button *ngFor="let tab of tabs" 
    [routerLink]="[{ outlets: { sub: [tab.name] } }]" 
    routerLinkActive="selected"> 
    <span>{{ tab.label }}</span> 
    </button> 
</div> 

<section> 
    <router-outlet name="sub"></router-outlet> 
</section> 

app.module.ts

imports: [ 
... 
RouterModule.forChild([ 
     { 
     path: 'registers', 
     component: RegistersComponent, 
     children: [ 
      {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'}, 
      {path: 'drivers', component: DriversComponent, outlet: 'sub'}, 
      {path: 'bases', component: BasesComponent, outlet: 'sub'}, 
      {path: 'lines', component: LinesComponent, outlet: 'sub'}, 
      {path: 'users', component: UsersComponent, outlet: 'sub'}, 
      {path: 'config', component: ConfigComponent, outlet: 'sub'}, 
      {path: 'companies', component: CompaniesComponent, outlet: 'sub'} 
     ], 
     canActivate: [AuthGuard] 
     } 
    ]), 
...