关于 Angular 11 中多路由器的问题

Question

我有一个问题，我不知道我是否遵循了 angular 的最佳实践，即使它现在有效：

这是这个嵌套组件的结构：页数

这是我的 app-routing.module.ts 文件：

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: 'welcome', component: WelcomeComponent, canActivate: [AuthGuard] },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [{ path: 'team', component: TeamComponent }],
  },

  { path: '', redirectTo: 'home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

所以，team组件是Admin组件的子组件，Admin组件中有一个导航栏，它会在里面渲染team组件。

管理组件代码：

<app-nav-admin></app-nav-admin>

<router-outlet></router-outlet>

团队组件的导航栏 href 代码 HTML:

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="admin/team">Team management</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Link</a>
        </li>
      </ul>
    </div>

点击团队后的结果link：

如您在 href 值中所见，我分配了“admin/team””以转到团队组件，它确实有效，但这是最佳做法吗？

谢谢大家！

Answer 1

你快到了。但是，现在如果在一个页面上你需要 FormsModule 因为你想在你的模板中使用 NgModelDirective，你将为 AppModule 中的每个页面加载 FormsModule ，即使您不需要它。最佳实践是实现路由级代码拆分，例如。每页使用一个模块。

您可以使用以下命令生成页面：

ng g module register --module account --route account

这将生成一个模块和组件，允许您分离依赖项。完整示例：

cd app
ng g module pages --module app --route /
cd pages
ng g module account --module pages --route account
cd account
ng g module register --module account --route register
ng g module login --module account --route login
ng g module profile --module account --route profile

确保

PagesModule 是 而不是 在 AppModule
AccountModule 是 而不是 在 PagesModule
RegisterModule、LoginModule 和 ProfileModule 不是导入到 AccountModule

它还允许您在任何与帐户设置相关的页面上共享 html 横幅或片段。在您的情况下，这将在 admin.componrnt.html:

<app-nav-admin></app-nav-admin>
<router-outlet></router-outlet>

您会注意到 main.xxxxxx.js（主包）的大小急剧减小），因此您的应用加载速度会更快。但是，在导航时，其他页面所需的其他模块尚未加载，因此您会遇到延迟。要解决此问题，您可以在 RouterModule.forRoot() 调用 (app-routing.module.ts)

的选项中使用 preloadingstrategy: PreloadAllModules

另请注意，生成的 AccountRoutingModule 具有以下路线：

const routes: Routes = [
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
  { path: 'register', loadChildren: () => import('./register/register.module').then(m => m.RegisterModule) },
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },
];

import('') 指令解耦了您的模块，同时仍然允许进行强类型检查。所以模块不需要在 AccountModule.

中被 imported

作为旁注，您可以使用 Chrome 中内置的 Lighthouse 来评估您的网站。它会检测到您有一个 angular 应用程序，建议之一是使用路由级代码拆分。由于 Lighthouse 检测到整个 javascript 应用程序被立即加载，包括当时不需要的模块。要使用 Lighthouse，在 Chrome 中只需按 F12 打开开发人员工具，然后会有一个选项卡 Lighthouse.

Answer 2

您的方法可行，但我建议使用模块 (https://angular.io/guide/feature-modules) 在您的项目中实现良好的实施。

例如，您可以有一个管理模块，而这个模块会有自己的路由器。通过这种方式，您可以更好地控制路由和子组件，也可以实现延迟加载。

关于 Angular 11 中多路由器的问题

Question regarding multi router in angular11

angular-ui-router

angular