Угловая навигация для подкомпонентов

Question

Я использую Router-Outlet для отображения различных компонентов, выбранных пользователем

<nav>
  <a id="home" routerLink="/home" >Home</a>
  <a id="about" routerLink="/about" routerLinkActive="active">About</a>
  <a id="open-close" routerLink="/open-close" routerLinkActive="active">Open/Close</a>
  <a id="status" routerLink="/status" routerLinkActive="active">Status Slider</a>
  <a id="toggle" routerLink="/toggle" routerLinkActive="active">Toggle Animations</a>
  <a id="enter-leave" routerLink="/enter-leave" routerLinkActive="active">Enter/Leave</a>
  <a id="auto" routerLink="/auto" routerLinkActive="active">Auto Calculation</a>
  <a id="heroes" routerLink="/heroes" routerLinkActive="active">Filter/Stagger</a>
  <a id="hero-groups" routerLink="/hero-groups" routerLinkActive="active">Hero Groups</a>
   <a id="My-App" routerLink="/My-App" routerLinkActive="active">My App</a>
</nav>

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

Вот вкладка "My-App"

<div contenteditable="true">
  Patients
</div>

<ul>
  <li *ngFor="let patient of patients" >
        <a > {{patient.name}} </a>
  </li>
</ul>

Теперь, когда пользователь щелкает или выбирает любого пациента, я хочу перейти к новому компоненту, называемому «дочерний компонент», и хочудля отображения полной информации о пациенте.

Как лучше всего достичь с / без использования верхнего уровня "Router-Outlet"

Answer 1

Полагаю, ваше требование показать навигацию и обновить некоторую часть страницы с помощью дочерних маршрутов.

_______________________________
Nav           Nav           Nav
_______________________________


      Full Details

_______________________________

В app.compoent.ts

RouterModule.forRoot(
[
    {
        path: '',
        component: AppComponent,
        children: [
            {
                path: 'home',
                component: HomeComponent
                pathMatch: 'full',
            },
            {
                path: 'about',
                loadChildren: './about/about.module#AboutModule',
                pathMatch: 'full',
            }
        ],
    },
]);

aboutВ маршруте, который я показал, используется модуль с отложенной загрузкой, который является наилучшим способом загрузки частей приложения только при необходимости.

Давным-давно я создал рабочий угловой проект для тестирования этой опции, вы можете проверитьэтот проект для справки

https://stackblitz.com/edit/lazy-loading-and-router-2?file=src%2Fapp%2Fcustomers%2Fcustomers-routing.module.ts

Пожалуйста, дайте мне знать, если вам нужно больше разъяснений.