如何使用 ASP.NET Core Angular SPA 模板在内容更改时实现加载微调器？

Question

我只是基于 Angular 模板为 ASP.NET Core 2.0 设置了一个玩具项目，以便创建一个用于测试目的的 SPA：

• https://github.com/aspnet/JavaScriptServices/tree/dev/templates/AngularSpa
• https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

我知道服务器预渲染过程已经使 SPA 的处理速度快了很多，但只是在延迟的情况下。

但是仍然如何实现呢？它实际上可以完全自动化吗（就像在客户端编码时适用于所有视图（！*.cshtml））？

谢谢

Answer 1

如果您希望在路由更改时使用微调器，您可以设置一个标志作为路由器事件的一部分：

checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
        this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
        this.loading = false;
    }
}

然后根据该标志打开/关闭微调器。

在 HTML 中：

<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="loading"></span>

我在这里设置了一个工作示例：https://github.com/DeborahK/Angular-Routing（在 APM-Final 文件夹中）。