Angular 2-하위 모듈 라우팅 및 중첩 된 <라우터 콘센트>

아래에 설명 된 시나리오에 대한 Angular 2 솔루션을 찾고 있습니다.

이 시나리오에서 상단 탐색에는 하위 모듈을로드하는 링크가 포함되고 하위 탐색에는 하위 모듈의 콘텐츠를 업데이트하는 링크가 있습니다.

URL은 다음과 같이 매핑되어야합니다.

• / home => 메인 컴포넌트 라우터 아웃렛에 홈 페이지를로드합니다.
• / submodule => 기본 구성 요소 라우터 콘센트에 하위 모듈을로드하고 기본적으로 하위 모듈의 홈 페이지와 하위 탐색 모음을 표시해야합니다.
• / submodule / feature => 하위 모듈의 라우터 콘센트 내부의 기능을로드합니다.

앱 모듈 (및 앱 구성 요소)에는 다른 하위 모듈로 이동하는 상단 탐색 모음이 포함되어 있으며 앱 구성 요소 템플릿은 다음과 같을 수 있습니다.

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

그러나 여기에 복잡성이 있습니다. 두 번째 수준의 탐색 모음과 자체 구성 요소를로드하기위한 자체 라우터 콘센트가있는 유사한 레이아웃을 갖는 하위 모듈이 필요합니다.

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

모든 옵션을 시도하고 모든 곳에서 검색했지만 라우터 콘센트가있는 하위 모듈에 기본 템플릿 (예 : 앱 구성 요소)을 포함하고 하위 탐색을 잃지 않고 내부 라우터 콘센트에 하위 모듈의 내용을로드하는 솔루션을 찾을 수 없었습니다. .

어떤 의견이나 아이디어라도 감사하겠습니다

html 페이지는 다음과 같습니다.

메인 페이지

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

하위 모듈 페이지

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

상단 네비게이션 바에서 네비게이션을 클릭하면 메인 루트 아웃렛이 각각 라우팅됩니다.

하위 탐색 바를 클릭하는 동안 라우터 콘센트 [sub]가 각각 라우팅됩니다.

HTML은 괜찮습니다. 트릭은 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
  }
]

도움이되기를 바랍니다.

자세한 내용은 https://angular.io/guide/router

사용하다:

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

전체 예 :

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

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