gpt4 book ai didi

angular - .Net 核心 MVC 路由 : Setting MapSpaFallbackRoute Conditionally Per Controller

转载 作者:太空狗 更新时间:2023-10-29 17:08:51 24 4
gpt4 key购买 nike

我正在开发一个涉及多个单页应用程序的项目,这些应用程序托管在一个 .Net Core 1.0 网络应用程序上。

目标是对每个 SPA 进行分区,以便它们都单独存在,每个 SPA 都有自己的 View 和 Controller 。

在 Startup.cs 中,我使用 Microsoft.AspNetCore.SpaServices MapSpaFallbackRoute 将深层链接传递给 SPA(在本例中为 Angular 2),因此 MVC 不会混淆并在页面刷新时抛出 404。

当我在 MapSpaFallbackRoute 中手动设置 Controller 时,我一次可以为一个 SPA 工作,但我想不出一种方法来为每个 SPA Controller 有条件地设置它。

我假设 Mapwhen() 和 Run() 的组合会让我到达我需要去的地方,但我似乎无法获得正确的语法。

假设 SPA 被命名为“Dash1”、“Dash2”等。以下回退路线非常适合 Dash1:

 app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");

routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Dash1", action = "Index" });
});

我已经试过了:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
app.Map("/Dash1", HandleDash1);

}

private static void HandleDash1(IApplicationBuilder app)
{
app.UseMvc(routes =>
{
routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Dash1", action = "Index" });
});
}
}

...但是当我导航到 Dash1 并尝试刷新页面时,浏览器会在所有 http 请求前添加“/Dash1/”并破坏所有内容。

最佳答案

我让它与 MapWhen() 一起工作,但每个 SPA 都必须以这种方式注册。

app.MapWhen(context => context.Request.Path.Value.StartsWith("/Dash1"), builder =>
{
builder.UseMvc(routes =>
{
routes.MapSpaFallbackRoute("dash1-fallback", new { controller = "Dash1", action = "Index" });
});
});

app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});

我正在使用这种方法来托管 Angular(2+) 应用程序。我最初使用 SystemJS 并将所有应用程序保留在一个项目中,但是当版本 4 发布时我转向了 Angular CLI。

我发现管理应用程序的最佳方法是在解决方案中为每个应用程序创建一个单独的项目,并使用 NPM 脚本将捆绑文件复制到“主”项目的 wwwroot 内的文件夹中。

我没有返回 View ,而是提供由 CLI 创建的静态 html 文件,但 View 也可以正常工作。

public IActionResult Index()
{
return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/dash1", "index.html"), "text/HTML");
}

棘手的部分是管理路由器。您必须通过将 window['_app_base'] 设置为与当前 Controller 的路由相对应,来设置基本 href 并将路由移交给 Angular 路由器。

在 index.html 中包含以下内容:

<head>
// Set base href.
// You need to include the path if serving the static file from wwwroot
// Use '/' if using a View (I think, I had to change this when I switched to static files).

<base href="/dash1/">

<script>
(function () {
// You could type the controller path here again but this will infer it.

window['_app_base'] = '/' + window.location.pathname.split('/')[1];

})();
</script>
</head>

然后,Angular 路由器必须从窗口 ['_app_base'] 获取它的方位。在 app.module.ts 中包含以下内容:

import { NgModule, Provider } from '@angular/core';
import { APP_BASE_HREF, Location } from '@angular/common';
const baseHref: Provider = {
provide: APP_BASE_HREF,
useValue: window['_app_base'] || '/'
};

最后,在@NgModule 的providers 数组中包含baseHref。

关于angular - .Net 核心 MVC 路由 : Setting MapSpaFallbackRoute Conditionally Per Controller,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39856216/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com