角8-架构/路由最佳实践(建议)

Question

我刚接触到角度，对架构建议有点困惑。为了避免一个宽泛的问题，我将形成一个A或B的风格，以及如何实现这一点。问题在于延迟加载和优化。

所以我有一个基本的SPA，它有一个登录页面、一个404和几个页面，只有当您登录时才能查看(=feature )。

需求：特性页有导航条、侧边栏和页脚，而登录和404页则没有。

方法A:

• 具有模块和路由模块的shell组件
  • 模块将导入所有功能页及其路由。

​

• 每个特性页都有自己的路由，从shell组件加载为子特性。

树：

app/
    login/
          login-component
          login-routing.module.ts
          login.module.ts
    pageNotFound/ (similar to login)
    shell/
          page1/
                page1-component1
                page1-component2
                page1-routing.module.ts
                page1.module.ts
          page2/ (similar to 1 etc)
          shell-routing.module.ts
          shell.module.ts

方法B:

这要简单得多，而不是每个功能页面都有自己的路由模块，shell路由模块将拥有所有的路由。

shell-routing.module.ts:

const shellRoutes: Routes = [ { path: '', component: ShellComponent, children: [ { path: 'page1Component1', component: page1-component1}, { path: 'page1Component2', component: page1-component2}, ... ], canActivate: [AuthGuard] } ]

方法C:开放建议！

从我的研究来看，方法A似乎是我对approach A提出的最好的方法，它导致了方法B：

假设侧栏导航：Dashboard Profile Dropdown-group -> page1 page2 About Us

如果我在仪表板页面上，并选择page1，则下拉列表将关闭。如果我在page1上，并选择page2，则下拉列表将按预期工作。

这是用方法B解决的，但我想我的问题是如何/如果我能用方法A来处理这个问题

Answer 1

下面是我处理类似问题的方法，其中我有一个auth页面和特性页。

app.module.ts

/* ... */
imports: [
 /* ... */
 AuthModule, // Contains `/auth` route
 ShellModule,
]
/* ... */

shell-routing.module.ts

 path: '',
    component: ShellComponent,
    canLoad: [AuthGuard],
    children: [
      {
        path: 'feat1',
        loadChildren: () => import('../feat1/feat1.module').then(m => m.Feat1Module),
      },
      {
        path: 'feat2',
        loadChildren: () => import('../feat2/feat2.module').then(m => m.Feat2Module),
      },
    /* ... */
    ]

shell.component.html

<app-navbar></app-navbar>

<app-sidebar></app-sidebar>

<router-outlet>

<app-footer></app-footer>

在我的情况下，登录成功后，我会重定向到上面提到的页面之一。

另外，对于延迟加载的模块使用重要的保护，如果不允许对它们的导航，这将防止它们实际被加载。如果要使用canActivate，即使导航失败，模块也会被加载。

如果feat1有子功能组件，它的路由模块应该是怎样的呢？

以下是我对它的定义：

// feat1-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: Feat1,
    children: [
     {
      path: ':id',
      component: Feat1SingleComponent,
     },
  // It can also have lazy-loaded modules!
     {
      path: 'lazy',
      loadChildren: () => import('../lazy/lazy.module').then(m => 
      m.LazyModule)
     },
   ]
  },
];

<!-- feat1.component.html -->

<!-- ... -->

<router-outlet></router-outlet>

<!-- ... -->