Как ограничить router-outlet заполнение только определенной части страницы этим компонентом?

Question

Я использую Angular 13 и PrimeNG 13. У меня есть этот базовый компонент (ContentComponent), где я хотел бы щелкнуть элемент в меню и увидеть соответствующий компонент в области основного контента...

      <div>
    <div class="sidePanel">
        <div class="menu">           
            <p-panelMenu  [model]="items" [multiple]="false"></p-panelMenu> 
        </div>
        <div class="main">             
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Я определил эти элементы меню PrimeNG...

        ngOnInit() {
    this.items1 = [{
      label: 'Users',
      items: [
        {
          label: 'Reports',
          id: 'reports',
          routerLink: ['reports']
        }
    ...
      }

и я установил это в своем файле app-routing.module.ts

      const routes: Routes = [
    ...
  {
    path: 'content',
    children: [
      {
        path: '',
        component: ContentComponent
      },
      {
        path: 'reports',
        component: ReportsComponent
      },

но когда отображается моя страница с меню панели, и я нажимаю элемент «Отчеты», «Компонент отчетов» занимает весь экран и вызывает исчезновение панели навигации. Как ограничить router-outlet заполнение компонента только в указанном разделе страницы?

Answer 1

ПосколькуReportsComponentдолжны быть представлены в течениеContentComponentв зависимости от изменения маршрута вы можете изменить маршруты приложения следующим образом:

      const routes: Routes = [
    ...
  {
    path: 'content',
    // The parent component should be added here:
    component: ContentComponent
    children: [
      // The children's components should be added here:
      {
        path: 'reports',
        component: ReportsComponent
      },

Подробнее о вложенных маршрутах в Angular читайте здесь: https://angular.io/guide/router#nesting-routes.