如何使用 ASP.NET 核心角度 SPA 模板在内容更改时实现加载微调器?

Question

我只是为Core 2.0设置了一个基于Angular模板的玩具项目 ASP.NET 以便创建一个用于测试目的的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 文件夹中(。