使用 ASP.NET MVC 4 在 Angular 2 中路由

Question

我在现有的 MVC（aspnet 核心）应用程序中添加了一些使用 Angular2 作为前端的接口。

但是当您通过 url 访问或刷新时我遇到了问题 而不是加载相应的组件，而是加载忽略路由的主组件。

例如： 该应用程序有 2 个组件，holaComponent，chauComponent。

如果我输入网址栏

localhost/Admin.mvc/Angular

登陆 localhost/Admin.mvc/Angular/Hola。那很完美！ Hola 是我的“家”组件。

如果我输入

localhost/Admin.mvc/Angular/Chau

登陆 localhost/Admin.mvc/Angular/Chau/Hola。加载 Hola 组件而不是 Chau 组件。

如果我输入

localhost/Admin.mvc/Angular/Hola

登陆 localhost/Admin.mvc/Angular/Hola/Hola。

注意事项：

• 使用 'routerLink=""' 的路由工作正常。问题只出现 当您通过 url 访问或刷新时。
• Angular2 应用是视图中的 boostrap（视图名称：Angular）。
• Admin.mvc 是一个控制器，也用于非角度视图。

routeConfig.cs 文件：

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.IgnoreRoute("{resource}.ashx/{*pathInfo}");

        routes.MapRoute(
            name: "Homepage",
            url: "",
            defaults: new { controller = "Account", action = "Login" }
        );

        routes.MapRoute(
            name: "Controller",
            url: "{controller}",
            defaults: new { action = "Index" }                             
             );



        routes.MapRoute(
            name: "Default",
            url: "{controller}.mvc/{action}/{id}",
            defaults: new { controller = "Account", action = "Login", id = UrlParameter.Optional }
            ,
              constraints: new
              {
                  serverRoute = new ServerRouteConstraint(url =>
                  {
                      return !url.PathAndQuery.StartsWith("/Admin.mvc/Angular",
                          StringComparison.InvariantCultureIgnoreCase);
                  })
              }
        );
        routes.MapRoute(
       name: "spa-fallback",
       url: "Admin.mvc/Angular/{*pathInfo}",
       defaults: new { controller = "Admin", action = "Angular"});

    }

我的角度路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { FlekzComponent } from './ng-flekz.component';
import { HolaComponent } from './ng-flekz-hola.component';
import { ChauComponent } from './ng-flekz-chau.component';

const routes: Routes = [    
    { path: '', redirectTo: 'hola', pathMatch: 'full' },
    { path: 'hola', component: HolaComponent },
    { path: 'chau', component: ChauComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class FlekzRoutingModule { }

-抱歉英语不好，不是我的母语。

Answer 1

不确定这是否适合您，但如果您可以在 URL 中使用哈希值，您可以像这样导入：RouterModule.forRoot(routes, {useHash: true})。然后，您将拥有该应用程序的相同基本 URL（在您的情况下为 Admin.mvc/Angular），并且该应用程序的其余部分将按如下方式路由：

• Admin.mvc/Angular/#/hola -> HolaComponent
• Admin.mvc/Angular/#/chau -> ChauComponent

检查您是否需要将base href 更新为您将使用的任何路径。