Angular 2 - Định tuyến mô-đun con và <router-outlet> lồng nhau

Tôi đang tìm giải pháp với Angular 2 cho trường hợp được giải thích bên dưới:

Trong trường hợp 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 phải ánh xạ như sau:

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

Mô-đun ứng dụng (và thành phần ứng dụng) chứa thanh điều hướng trên cù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 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 các mô-đun con của mình có bố cục tương tự với thanh điều hướng cấp hai và ổ cắm bộ định tuyến của riêng chúng để tải các thành phần của riêng chúng.

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

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

Tôi sẽ đánh giá cao bất kỳ đầu vào hoặc ý tưởng nào

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

Trang chính

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

Trang mô-đun phụ

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

khi nhấp vào điều hướng trong thanh điều hướng trên cùng, lối ra tuyến đường chính sẽ định tuyến tương ứng.

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

HTML ổn, mẹo sẽ xuất hiện khi viết 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 ích cho bạn.

Thêm chi tiết https://angular.io/guide/router

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]
      }
    ]),
...

bạn phải đề cập đến tên cửa hàng trong các tuyến đề cập đến tên cửa hàng bộ định tuyến của bạn trong định tuyến như sau "outlet: 'sub"

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"},
      ]
   },
];