在Angular 2中加载延迟加载的模块时显示活动指示器 [英] Show activity Indicator while loading a lazy loaded Module in Angular 2

问题描述

我的情况如下.我有一个菜单，有多个选项.应根据用户权限(已经解决)显示每个菜单，大多数菜单项都封装为模块，并且大多数模块是延迟加载的，因此，当用户第一次单击菜单项时，它将加载(到目前为止，所有内容效果很好)，现在我的要求是，为了提供更好的用户体验，在惰性加载的模块加载过程中，用户单击菜单项后，我需要显示活动指示器.

My scenario is as follows. I have a menu, with multiple options. Each menu should be shown depending on user permissions (already solved), most menu items are encapsulated as modules, and most of the modules are lazy loaded, so when a user clicks a menu item the first time, it loads (up to here everything works well), now my requirement is, in order to give a better user experience, I need to show activity indicator after user clicks a menu item while the lazy loaded module is loading.

到目前为止，我尝试使用来自Angular Router的canActive，canLoad，canActivateChild接口，但是没有运气.

Up to this, I tried using canActive, canLoad, canActivateChild interfaces from Angular Router but with no luck.

有什么想法吗?

推荐答案

您可以侦听两个路由器事件:

You can listen for two router events:

• RouteConfigLoadStart
• RouteConfigLoadEnd

• RouteConfigLoadStart
• RouteConfigLoadEnd

当加载延迟加载的模块时，它们会触发.与标准路由器事件(例如NavigationStart)相比，使用这些事件的优势在于它们不会在每次路由更改时都触发.

They fire when a lazy loaded module is being loaded. The advantage of using these over the standard router events such as NavigationStart is that they won't fire on every route change.

在您的根AppComponent中收听它们，以显示/隐藏微调框.

Listen to them in your root AppComponent to show / hide your spinner.

app.component.ts

import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/router';

...

export class AppComponent implements OnInit {

    loadingRouteConfig: boolean;

    constructor (private router: Router) {}

    ngOnInit () {
        this.router.events.subscribe(event => {
            if (event instanceof RouteConfigLoadStart) {
                this.loadingRouteConfig = true;
            } else if (event instanceof RouteConfigLoadEnd) {
                this.loadingRouteConfig = false;
            }
        });
    }
}

app.component.html

这里只是一个简单的字符串，但是您可以使用微调器组件.

Just a simple string here, but you could use a spinner component.

<router-outlet></router-outlet>

<ng-container *ngIf="loadingRouteConfig">Loading route config...</ng-container>

我正在Angular v4.2.3中使用这种方法

I'm using this approach with Angular v4.2.3

这篇关于在Angular 2中加载延迟加载的模块时显示活动指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！