Angular 8 - Architecture/Routing 最佳实践（建议）

Question

我是 angular 的新手，对架构建议有点困惑。 为了避免一个宽泛的问题，我将以 A 或 B 的风格来形成它，以及如何实现它。问题是关于延迟加载和优化

所以我有一个基本的 SPA，有一个登录页面、一个 404 和一些只有登录后才能查看的页面（=功能页面）。

要求： 功能页面有导航栏、侧边栏和页脚，而登录和 404 页面没有。

方法一：

• 一个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 似乎是最好的方法 我对 方法 A 的问题导致了方法 B:

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

如果我在 仪表板页面 和 select page1，下拉菜单将关闭。 如果我在 page1 和 select page2，下拉菜单按预期工作。

这已通过 方法 B 解决，但我想我的问题是 how/if 我可以使用 方法 A 来解决这个问题

Answer 1

这是我解决类似问题的方法，我有一个授权页面和功能页面。

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>

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

此外，重要 对延迟加载模块使用 canLoad 保护，这将阻止它们在导航到它们时实际加载不允许。如果您要使用 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>

<!-- ... -->