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（包含带有侧栏顶部栏脚等的仪表板布局）或诸如login和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。如果简单是关键，那么我的第一个教导就是使用解析器，并给我的MainLatoutComponent一个巨大的layoutConfigObject 将溃败网址作为键，将侧边栏配置对象作为值，然后侦听MainLayoutComponent内路由器出口上的更改，然后通过@Input输入我的sidebarComponent正确的配置文件每个路由器网址。但这让我觉得我正在重新编码路由器。

B。如果角度方式是关键（如果我们看看什么是在某些stackoverflow主题中推荐），那么我应该使用名称为“ sidebar”的路由器出口，然后为每个路由在我的路由器中调用其他侧边栏组件。即使我有一个应该仅包含配置的“愚蠢/简单组件” 文件并渲染菜单，从技术上讲，我可以在每条路线上进行操作放置一个：
{ path: 'some-path', component: SidebarComponent, outlet: 'sidebar', resolve: { menuConfig: SidebarConfigResolver } }
但是，如何有效地将数据提供给SidebarConfigResolver？我是否仍使用路由作为键并使用menuConfig进行大型配置？一个值？还是为每个路由都使用不同的解析器？我可以吗给我的解析器提供参数，并在每个路径提要中手动给参数 menuConfig对象？此外，为每个单身制作侧边栏路线我认为这条路线很愚蠢。通往多角度样板的方式一两个月之内，不忠将使我烦恼。

无论如何，这些可能不是唯一的选择，甚至可能不是最佳选择。现在，我非常倾向于选择选项A，但选择项B似乎正处于正确的轨道上。有什么想法吗？

动态侧边栏Angular

0 个答案: