Как управлять откатом маршрута HTML5 с параметром для Angular SPA с ASP.NET Core в Startup.cs?

Искал, но ответа не нашел, может тут кто-то умный знает, что делать. У меня есть Angular SPA с серверной частью ASP.NET Core. В Angular я не хочу использовать Hash Bang Routes. Но я понятия не имею, как настроить маршрутизацию, чтобы иметь возможность обновлять или вводить страницу компонента SPA с параметром. Например: somewebsite.com/a5eccbd9 //where a5eccbd9 is a parameter.

Примеры, наиболее близкие к моей проблеме, но маршрутизация только в index.html SPA.

https://stackoverflow.com/a/61275033

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

Но после перенаправления в файл, что дальше делать с параметром и перенаправлением на правильный компонент? Моя угловая маршрутизация:

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

А в index.html у меня: <base href="/" />

И в моем тупике я понятия не имею, как правильно меня перенаправить на серверную часть.


angular routes asp.net-core single-page-application fallback
person bakunet    schedule 02.06.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Попробуй это:

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

В вашем component.ts вы можете получить идентификатор по вызову, используя это в методе ngOnInit:

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

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

person danielsantoso    schedule 03.06.2021
comment
Спасибо за подсказку, но я уже использую this.route.snapshot.params.id, а с path: '/:id', получаю ошибку: Invalid configuration of route '/:id': path cannot start with a slash. Во всяком случае, основная проблема заключается в том, что при откате SPA клиент теряет укоренение, и я просто получаю 404. - person bakunet; 03.06.2021
comment
извините, все еще используйте ': id', это правильно, а затем, чтобы получить значение идентификатора, просто используйте this.route.snapshot.params.id. Он должен работать :) - person danielsantoso; 03.06.2021

arrow_upward
0
arrow_downward

На самом деле резервная маршрутизация для 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: как получить доступ к строке запроса index.html в компоненте приложения, откуда я хотел из ASP.NET Core чтобы перенаправить его на: index.html?id={id} и в основной компонент приложения, чтобы поймать id, но Angular оказался умнее, чем я ожидал.

person bakunet    schedule 03.06.2021