angular - 在 Angular 2 中加载延迟加载模块时显示事件指示器

Question

我的场景如下。我有一个菜单，有多个选项。每个菜单都应该根据用户权限显示(已经解决)，大多数菜单项被封装为模块，并且大多数模块是延迟加载的，所以当用户第一次点击菜单项时，它加载(到这里一切工作正常)，现在我的要求是，为了提供更好的用户体验，我需要在用户单击菜单项后显示事件指示器，同时加载延迟加载模块。

到目前为止，我尝试使用来自 Angular Router 的 canActive、canLoad、canActivateChild 接口(interface)，但没有成功。

有什么想法吗？

Answer 1

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

• RouteConfigLoadStart
• RouteConfigLoadEnd

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

在您的根 AppComponent 中收听它们以显示/隐藏您的微调器。

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

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

<router-outlet></router-outlet>

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

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