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

Question

我刚刚基于Angular Core 2.0 的Angular 模板设置了一个玩具项目，以便创建用于测试目的的 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;
    }
}

然后根据该标志转动 on/off 微调器。

在HTML中：

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

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