Angular 启动时角度5加载微调器，延迟加载路由/模块

在Angular 5中，如果请求的路由/模块是延迟加载的，我如何在应用程序启动时显示

我的第一个想法是简单地将spinner代码包含在

中，特别是Christophe Vidal对已接受答案的评论）

这很好，但是，如果在应用程序启动时，请求的路由恰好与延迟加载的路由/模块对应，则会出现问题

在这种情况下，微调器最初将按预期显示，但是会过早消失。更具体地说，当微调器消失时，在实际内容出现之前还有明显的时间

我假设这个延迟是由于延迟加载和我在
中的微调器已经被覆盖，即使还没有内容

index.html

<app-root>
    <div class="loading">
        <!-- loading spinner here -->
    </div>
</app-root>



在此场景中，您将如何显示加载微调器？

注意：我不是要在通过http获取数据时显示微调器，而是要在应用程序启动时显示微调器。
我的想法是在初始化时订阅应用程序根
app.component.ts
中的角度路由器事件。但是，需要注意的是，这不仅会导致在加载延迟加载的组件时显示微调器，还会在导航到任何路由时显示微调器。（这可能不是你想要的）

***更新***
我发现您可以绑定到
，这将允许您确定要加载的组件。我知道，要让旋转器在惰性加载组件加载后停止旋转是一件很困难的事情。通过绑定到
app.component.ts
中的
路由器出口
，您可以确定正在加载的组件，并在该点停止微调器

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<router-outlet #outlet></router-outlet>`
})
export class AppComponent implements AfterViewInit {
  @ViewChild(RouterOutlet)
  public outlet: RouterOutlet;

  public ngAfterViewInit(): void {
    this.outlet.activateEvents.subscribe((component) => {
      if (component.__proto__.constructor.name === 'myLazyComponent') {
        //Hide Spinner
      }
    });
  }
}

从'@angular/core'导入{Component，ViewChild，AfterViewInit}；
从'@angular/router'导入{RouterOutlet}；
@组成部分({
选择器：“我的应用程序”，
模板：``
})
导出类AppComponent实现AfterViewInit{
@ViewChild（RouterOutlet）
公共出口：RouterOutlet；
public ngAfterViewInit（）：void{
this.outlet.activateEvents.subscribe（（组件）=>{
if（component.\uuuu proto\uuuu.constructor.name==='myLazyComponent'）{
//皮纺纱机
}
});
}
}
有路由器：RouteConfigLoadStart和RouteConfigLoaded，因此代码为：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<app-spinner *ngIf="showSpinner"></app-spinner><router-outlet></router-outlet>`
})
export class AppComponent implements AfterViewInit {
  showSpinner: boolean = false;

  constructor(private router: Router) {
      this.router.events.subscribe(
              event => {
                if(event instanceof RouteConfigLoadStart) {
                  showSpinner = true;
                  return;
                }
                if(event instanceof RouteConfigLoadEnd) {
                  showSpinner = false;
                  return;
                }
          }
      );
   }
}

从'@angular/core'导入{Component，ViewChild，AfterViewInit}；
从'@angular/router'导入{RouterOutlet}；
@组成部分({
选择器：“我的应用程序”，
模板：``
})
导出类AppComponent实现AfterViewInit{
showSpinner:boolean=false；
构造函数（专用路由器：路由器）{
此为.router.events.subscribe(
事件=>{
if（RouteConfigLoadStart的事件实例）{
showSpinner=true；
返回；
}
if（RouteConfigLoaded的事件实例）{
showSpinner=false；
返回；
}
}
);
}
}

应用程序SPEnter组件可以是浏览器窗口中间的一个带有旋转图标的覆盖。
我想阐明您的应用程序体系结构。在应用程序启动时，从根目录路由到的第一个模块是延迟加载的模块？这取决于用户请求的任何路由。但是，确实存在这样一种情况：路由到的第一个模块是延迟加载的模块。在这种情况下，微调器过早消失。我假设它会在应用程序启动时显示，但当控制权转移到延迟加载时，它就会消失。因此，当延迟加载正在进行时，微调器已经不存在了。因此，我的问题的更好标题可能是：“如何在延迟加载期间显示加载微调器”？我认为您的标题很清楚。我只是想确保您有其他可能的路由，这些路由可能会在启动期间在根目录中加载。否则，如果立即加载的唯一模块是惰性模块，那么使用惰性加载就没有多大意义，这将破坏惰性加载的目的。我在工作中遇到了这种技术，它让我想起了你的问题。
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `<app-spinner *ngIf="showSpinner"></app-spinner><router-outlet></router-outlet>`
})
export class AppComponent implements AfterViewInit {
  showSpinner: boolean = false;

  constructor(private router: Router) {
      this.router.events.subscribe(
              event => {
                if(event instanceof RouteConfigLoadStart) {
                  showSpinner = true;
                  return;
                }
                if(event instanceof RouteConfigLoadEnd) {
                  showSpinner = false;
                  return;
                }
          }
      );
   }
}