Динамическая боковая панель Угловая

Question

Это может быть повторяющейся темой здесь в stackoverflow (как показывает быстрый поиск по «угловой боковой панели»), но я все еще не уверен, каким будет «правильный» способ сделать это.

Чтобы установитьВ каком-то контексте я сделал свое приложение с такой же маршрутизацией (имена были изменены по причинам IP-адреса компании):

const appRoutes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    component: MainLayoutComponent,
    children: [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: MainDashboardComponent },
      {
        path: 'user-stuff',
        children: [
          { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
          { path: 'dashboard', component: UserStuffDashboardComponent },
          {
            path: 'users',
            children: [
              { path: '', component: UserListComponent },
              {
                path: 'add',
                children: [
                  { path: ':id', component: UserFormComponent }, // edit and view users crud
                  { path: '', component: UserFormComponent } // add new users crud
                ]
              },
            ]
          },
        ]
      },
    ]
  },
  // TODO: fall-trough redirect on '' is not working for some reason. Redirection is being done manually in guard.
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: '**', canActivate: [AuthGuard], component: PageNotFoundComponent }
];

Это означает, что в моем главном компоненте есть первый маршрутизатор-выход длязагрузить MainLayout (содержащий макет панели мониторинга с нижним колонтитулом верхней панели боковой панели и т. д.) или страницы, такие как логин и страница 404, которые не имеют боковой панели и т. д. Затем компонент MainLayout реализует второй выход маршрутизатора для основного содержимого / тела, которое изменяется с помощью навигации ибоковая панель, верхняя панель, нижний колонтитул, который не.

<div class="app-body">
  <app-sidebar></app-sidebar>

  <div class="app-main">
    <app-header></app-header>

    <div class="app-content">
      <div class="app-box">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</div>

<app-footer></app-footer>

Теперь мне нужно было многократно используемое меню боковой панели, которое может показать глубоко вложенную навигацию (что-то вроде меню боковой панели учебника Angular), предпочтительно формировать конфигурацию JSON (Я в основном рендеринг дерева здесь), поэтому я сделал свой рекурсивный компонент, и он работает просто отлично, но здесьреальный вопрос:

Как / когда именно я должен передать своей боковой панели свой файл конфигурации?

Конечно, я могу придумать много решений, ноЯ просто не уверен, какой из них должен быть наиболее логичным.Должен ли я отдавать приоритет простоте?Повторное использование?Угловой способ делать вещи?Прямо сейчас я обдумываю две возможные реализации:

A.Если ключом является простота, то первым научил меня использовать распознаватель и передать огромный объект MainConfigObject моему MainLatoutComponent с URL-адресами маршрутов в качестве ключей и объектом конфигурации боковой панели в качестве значения, а затем прослушать изменения на выходе маршрутизатора внутри MainLayoutComponent и затем передать их вмой sidebarComponent через @ Введите правильный файл конфигурации для каждого URL-адреса маршрутизатора.Но это заставляет меня думать, будто я перекодирую маршрутизатор.

---

B.Если угловой путь является ключом (и если мы посмотрим на то, что рекомендуется в некоторых темах stackoverflow), то я должен использовать отдельный маршрутизатор-выход с name = "sidebar", а затем для каждого маршрута в моем маршрутизаторе вызватьдругой компонент боковой панели.Несмотря на то, что у меня есть «глупый / простой компонент», который должен просто взять файл конфигурации и отобразить меню, технически я мог бы на каждом отдельном маршруте разместить:

{ path: 'some-path', component: SidebarComponent, outlet: 'sidebar', resolve: { menuConfig: SidebarConfigResolver } }

Но тогда как мне это сделать?эффективно передавать данные в мой SidebarConfigResolver?Я все еще делаю большой конфиг с маршрутами в качестве ключей и menuConfig в качестве значения?или я делаю разные резольвер для каждого маршрута?Могу ли я дать параметры своему распознавателю и вручную на каждом фиде маршрутов menuConfig объектов?Кроме того, создание маршрута боковой панели для каждого отдельного маршрута, на мой взгляд, просто глупо.Путь к большому угловому шаблону, и это будет неверностью, запутает меня до черти через месяц или два.

В любом случае, это, вероятно, не единственные варианты и, возможно, даже не самые лучшие.Прямо сейчас я сильно склоняюсь к варианту А, но кажется, что я был на правильном пути.Есть идеи?