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

Question

我只是根据ASP.NET 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;
    }
}

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

在HTML中：

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

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