展会活动指示灯同时加载在角2个懒加载的模块

Question

我的情况如下。我有一个菜单，提供多个选项。每个菜单应取决于用户权限（已经解决），大多数菜单项都封装成模块，并且大多数模块都懒加载的，所以当用户单击菜单项的第一次，它加载（最多这里的一切显示效果很好），现在我的要求，为了提供更好的用户体验，我需要证明活动的指标用户点击而延迟加载模块加载菜单项后。

截至本，我尝试使用canActive，canLoad，从角路由器，但没有运气canActivateChild接口。

有任何想法吗？

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>

我使用的是角v4.2.3这种方法

Answer 2

你可以像下面这样做

1. 在app.component.html

<div class="main-loader" *ngIf="loading">
  <div class="cssload-container" >
      <div class="cssload-whirlpool"></div>
  </div>
</div>

2. 在app.component.ts

   import { Router, NavigationStart, NavigationEnd } from '@angular/router';
   
   
   loading:boolean = false;
   constructor(private router:Router) { 
     router.events.subscribe(event => {
       if(event instanceof NavigationStart) {
         this.loading = true;
         console.log("event started")
       }else if(event instanceof NavigationEnd) {
         this.loading = false;
         console.log("event end")
       }
       // NavigationEnd
       // NavigationCancel
       // NavigationError
       // RoutesRecognized
     });
   
   }

3. 在CSS任何加载动画

希望这是对你有用。谢谢

Answer 3

这是可能的点击链接到其他延迟加载路线同时加载第一个。这就是为什么我们需要计算加载路线：

app.component.ts

```

export class AppComponent { 

  currentlyLoadingCount = this._router.events.scan((c, e) => this._countLoads(c, e), 0);

  constructor(private _router: Router) { }

  private _countLoads(counter: number, event: any): number {
    if (event instanceof RouteConfigLoadStart) return counter + 1;
    if (event instanceof RouteConfigLoadEnd) return counter - 1;
    return counter;
  }

```

app.component.html <ng-container *ngIf="currentlyLoadingCount | async">Loading route config...</ng-container>

Answer 4

你可以使用CSS！

<routler-outlet></routler-outlet>
<div class='.loader>
  Just, wait a sec ! I'm loading
</div>

在您的模板

router-outlet + .loader {
  opacity : 1;
}

.loader {
  opacity : 0;
}

然后，你可以创建fancy spinners with HTML/CSS

Answer 5

对于那些谁需要兼容性（和处理）与IE11，公认的答案是不工作，从一个模块切换到另外的原因IE11不呈现装载机，所以我做了（不是很优雅，但工作）的解决方法：

在我的菜单项开关单击事件：

  public navigate(url: string) {
    this.configurationService.loading = true; //service variable linked with html loader

    //let's give time to tortoise IE11 to render loader before navigation...
    let obj = this;
    setTimeout(function() 
    {
      obj.router.navigateByUrl(url);
    }, 1);
  }