繁体   English   中英

关于angular11中多路由器的问题

[英]Question regarding multi router in angular11

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

这是这个嵌套组件的结构:pages

在此处输入图片说明

这是我的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>

点击团队链接后的结果: 在此处输入图片说明

正如您在 href 值中看到的那样,我分配了“admin/team”来转到团队组件,它确实有效,但这是最佳实践吗?

谢谢你们!

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

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

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
  • AccountModule导入RegisterModuleLoginModuleProfileModule

它还允许您在任何相关页面上时共享 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 import模块。

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM