解析器如何与 SSR 和 Angular Universal 一起工作

Question

我是 ssr 和 Angular universal 的新手，我有一个问题没有找到答案。

我想知道是否有可能在解析器完成之前由 ssr 服务器呈现 Angular 中具有路由解析的页面。

在我的例子中，我有一个覆盖整个页面的加载程序，我使用库 preboot 并为 'PrebootComplete' 事件添加一个事件侦听器。这个处理程序隐藏了加载器并让 app-root 组件显示。
在我的例子中，加载器在显示页面之前所有解析器完成后显示一瞬间，因此用户一直在等待没有加载器。

有什么方法可以在解析器执行时显示我的加载程序？
非常感谢！

Answer 1

当您开始解析数据时，路由器将发出 NavigationStart 事件。当路线被重新解决时，它将发出 NavigationEnd 事件。

因此您可以订阅路由器事件并将加载动画链接到布尔值：

在app.component.ts中：

loading = true

constructor(
  private router: Router
) {
  router.events.subscribe((routerEvent: Event) => {
    this.checkRouterEvent(routerEvent)
  })
}

checkRouterEvent(routerEvent: Event): void {
  if (routerEvent instanceof NavigationStart) {
     this.loading = true
  } else if (
    routerEvent instanceof NavigationEnd ||
    routerEvent instanceof NavigationCancel ||
    routerEvent instanceof NavigationError) {
      this.loading = false
    }
}

在你的app.component.html中：

<span class="fa fa-spinner spinner" *ngIf="loading"></span>

或者无论你的加载器是什么样子，带有 *ngIf="loading"...

解析器如何与 SSR 和 Angular Universal 一起工作

How resolvers work with SSR and Angular Universal

server-side-rendering

angular-universal

angular

angular-resolver