Angular 2延迟加载会导致视图更改之间出现延迟

Question

我有一个可以切换的侧边菜单。在侧边菜单中有一个锚标记，用于将用户引导到管理页面，这是一个模块本身

    <a[routerLink]="['/admin']" (click)="sidenav.close()">Admin</a>

我懒得加载它

    { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' },

我遇到的一个小问题是，当用户打开侧面导航时，第一次点击该链接，这就是我将看到的内容......

1. 侧面菜单关闭一半，冻结500毫秒（估计）。此时，我仍然在加载管理模块时在后台看到旧组件。

2. 加载模块后，侧面菜单消失，显示管理页面。这是一个非常糟糕的用户体验，因为侧面菜单假设要平滑地隐藏（没有延迟加载它没有）

我想我需要改变点击功能，不要马上关闭侧面导航，而是做一些像

这样的事情

(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中实现这一点。非常感谢帮助

Answer 1

是的，可以使用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;
        }
    })
}