Question

我已经在我的应用中实现了一个启动画面，就像这样：

的index.html：

<app-root></app-root>
<div class="splash spinner"></div>

的CSS：

// ... Styles about spinner
app-root:empty + .splash {
    opacity: 1;
}

好的，在这种情况下，app-root当它为空时，我有一个微调动画并且没有问题，它运行正常。

但是，我的问题现在出现了，我在路由中加载了延迟：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from './core';

import {
  ...
} from './auth';

export const routes: Routes = [
  {
    ..
  },
  {
    path: 'api',
    loadChildren: 'app/api/myapi.module#MyApiModule',
    canActivate: [ AuthGuard ],
  },
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      enableTracing: true
    }),
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

在/apis路径中，我懒得加载MyApiModule，而在MyApiModule内，我有另一条路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MyComponent } from './mycomponent.component';
import { OtherComponent } from './othercomponent.component';

const routes: Routes = [
  {
    path: '',
    component: MyComponent,
    children: [
      {
        path: '',
        component: OtherComponent,
      },
      {
        path: ':id/api',
        loadChildren: 'app/api/api2/api.module#ApiModule',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OtherRoutingModule { }

当我的应用加载“延迟加载”模块（ApiModule模块）时，我想显示与我在'app-root'中设置的相同的启动画面。

目标是在加载惰性模块时显示启动画面，所以我的问题是，加载load-children模块时（通过事件或其他东西）是否有任何“简单”方法可以捕获？或者我需要以与我相同的方式完成（检查css路由器插座等等）。

Answer 1

app-root:empty选择器更像是一个黑客而不是加载指标的通用解决方案。当尚未加载脚本时，此类或类似的选择器仍可用于最初呈现的页面。

在某些常见情况下可能会显示加载指示符：

异步模块级延迟加载（SystemJS，Webpack块加载等）
长同步应用程序级操作
异步应用程序级操作
- HTTP请求（Http，HttpClient，原生XHR，...）
- IndexedDB请求
- 网络工作者互操作

所有这些情况都可以独立发生（例如由组件触发）或适用于可能导致明显延迟的Angular应用程序阶段：

初始应用程序初始化
路线改变

它总是取决于是否应该在较低（场景）或更高（阶段）级别触发微调器。

可以按常规方式处理某些方案（可以使用拦截器跟踪HttpClient个请求。）

某些方案无法有效处理。这包括ES和Angular延迟加载的模块，因为它们是在低级别处理的，并且通常不会暴露对链的承诺。

所以延迟加载的Angular模块留下了触发微调器的唯一选项，即在路由更改时：

router.events.subscribe(e => {
    if (e instanceof NavigationStart) {
        // show spinner
    } elseif (e instanceof NavigationEnd {
        || e instanceof NavigationError
        || e instanceof NavigationCancel) {
        // hide spinner
    }
});

如果某些异步方案发生在路由解析器之外，则可以另外涉及HttpClient拦截器。

由于触发微调器的几个进程可能同时发生，因此应使用计数器而非布尔标志实现微调器，如here所示。

在延迟加载模块中显示加载微调器

1 个答案: