如何使用 Angular SPA 的参数管理 HTML5 路由回退与 Startup.cs 中的 ASP.NET 核心？

Question

我正在搜索，但没有找到任何答案，也许这里有聪明的人知道该怎么做。我有 Angular SPA，有 ASP.NET 核心后端。在 Angular 中，我不想使用 Hash Bang Routes。但是我不知道如何配置路由，以便能够刷新或进入带有参数的 SPA 组件页面。例如：somewebsite.com/a5eccbd9 //where a5eccbd9 is a parameter.

最接近我的问题的示例，但仅路由到 SPA 的 index.html。

https://weblog.west-wind.com/posts/2017/aug/07/handling-html5-client-route-fallbacks-in-aspnet-core#Letting-ASP.NET-Core-Handle-Client-Side-Routes

https://weblog.west-wind.com/posts/2020/Jul/12/Handling-SPA-Fallback-Paths-in-a-Generic-ASPNET-Core-Server#handling-fallbacks-with-built-in-endpoints-and-route-processing

但是在路由到文件之后，接下来如何处理参数并重定向到正确的组件？我的 Angular 路由：

const routes: Routes = [
...
  {
    path: '',
    component: FormComponent,
  },
  {
    path: ':id',
    component: FormComponent,
  },
...
];

在 index.html 我有：<base href="/" />

在我的死胡同里，我不知道如何让后端正确地重定向我。

Answer 1

试试这个：

const routes: Routes = [
...
  {
    path: '',
    component: FormComponent,
  },
  {
    path: '/:id',
    component: FormComponent,
  },
...
];

在您的 component.ts 中，您可以通过在 ngOnInit 方法上使用此调用来获取 ID：

import { ActivatedRoute } from '@angular/router';

constructor(
    private route: ActivatedRoute
  ) { }
  
ngOnInit() {
  const id = this.route.snapshot.params.id);
}

Answer 2

实际上 Angular 的回退路由 比我预期的要容易。在后端我只需要添加端点映射：

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapFallbackToFile("/{id}", "/index.html"); //<- added
                endpoints.MapFallbackToFile("/", "/index.html");
            });

从现在开始，在 GET 请求之后：somewebsite.com/a5eccbd9 ASP.NET Core 将其重定向到 Angular SPA 的 index.html，并在那里 Angular路由通过自己的路由 path: ':id',.

处理原始请求

我也在考虑从这里开始的解决方案：Angular2: How to access index.html querystring in App Component 我想从 ASP.NET 核心将它重定向到：index.html?id={id}，并在主应用程序组件中捕获 id，但 Angular 似乎比我预期的要聪明。

如何使用 Angular SPA 的参数管理 HTML5 路由回退与 Startup.cs 中的 ASP.NET 核心？

How to manage HTML5 route fallback with parameter for Angular SPA with ASP.NET Core in Startup.cs?

fallback

routes

single-page-application

asp.net-core

angular