我有一个可以切换的侧边菜单。在侧边菜单中有一个锚标记,用于将用户引导到管理页面,这是一个模块本身
<a[routerLink]="['/admin']" (click)="sidenav.close()">Admin</a>
我懒得加载它
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' },
我遇到的一个小问题是,当用户打开侧面导航时,第一次点击该链接,这就是我将看到的内容......
侧面菜单关闭一半,冻结500毫秒(估计)。此时,我仍然在加载管理模块时在后台看到旧组件。
加载模块后,侧面菜单消失,显示管理页面。这是一个非常糟糕的用户体验,因为侧面菜单假设要平滑地隐藏(没有延迟加载它没有)
我想我需要改变点击功能,不要马上关闭侧面导航,而是做一些像
这样的事情(click)="onAdminLinkClick()"
onAdminLinkClick() {
// close side nav straight away
// display loading screen or progress bar
// load admin module
// dismiss loading screen or progress bar once complete loading and show
}
所以主要的问题是,如果有办法检测负载何时结束,那么我可以取消任何加载或关闭任何我需要关闭的东西
我不确定如何在角度2中实现这一点。非常感谢帮助
答案 0 :(得分:0)
是的,可以使用RouterEvent
让说loading是显示任何加载图标的真实变量,因此您可以在app.component.ts文件中执行此操作
constructor(private router: Router) {
router.events.subscribe((event: RouterEvent) => {
//lazyloading start
if(event instanceof RouteConfigLoadStart) {
}
//lazy loading end
else if(event instanceof RouteConfigLoadEnd) {
this.loading = false;
}
})
}