如何使用ASP.NET核心角SPA模板实现内容变化的加载旋转器？

Question

我只是根据ASP.NET Core2.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文件夹中)。