[英]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
中未导入RegisterModule
、 LoginModule
和ProfileModule
它还允许您在任何相关页面上时共享 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.