Angular 4 路由与 asp.net mvc（共享布局）

Question

我正在使用 angular 4 的 asp.net mvc 构建一个应用程序。我有一个共享布局，其中包含我页面的所有链接，它是 .cshtml 。当我给出一个将使用角度路由的链接时。但是当我单击该链接时它不起作用并且页面不显示。

我的共享布局链接代码：

         <li><a href="@Url.Action("Index","Admin")">User List</a></li>
                        <li><a href="@Url.Action("PermissionIndex","Admin")">Permission Index</a></li>
                        <li><a href="@Url.Action("RoleCreate","Admin")">Role Create</a></li>
                        <li><a href="@Url.Action("RoleIndex","Admin")">Role Index</a></li>
                        <li><a routerLink="/homes" routerLinkActive="active">Home</a>  </li>

这是我的主页组件：

    import { Component } from '@angular/core';

    @Component({
        selector: 'homes',
        templateUrl:"./home.component.html"
    })
    export class HomeComponent {

    }                   

这是应用路由模块：

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent },
  { path: 'homes', component: HomeComponent }

];

@NgModule({
    //imports: [
    //    BrowserModule,
    //    FormsModule,
    //    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
    //],
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

When I click on home then nothing showing up.

Answer 1

在尝试将 Angular 添加到现有的 ASP.Net MVC 网站时，我确实遇到了同样的问题。

我将路由配置到以“/app”开头的每个路径以重定向到我的 AppController（我的应用程序的主页）

我在 MVC 和 Angular 页面之间有一个共享布局，其中包含带有大量 @Url.Action 和 @Action.Links 的菜单。

这是我最初的 MVC 路由，也是导致问题的原因。

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            "Default",
            "{controller}/{action}/{id}",
            new {controller = "Home", action = "Index", id = UrlParameter.Optional},
            new
            {
                serverRoute = new ServerRouteConstraint(url => !url.PathAndQuery.StartsWith("/app", StringComparison.InvariantCultureIgnoreCase))
            }
        );

        routes.MapRoute(
            "angular",
            "{*url}",
            new {controller = "App", action = "Index"}
        );
    }
}

问题在于 @Url.Action 正在被解析：

<a href="@Url.Action("Action", "Controller")">Link</a>

在 Angular 页面上，url.PathAndQuery 将包含“/app”并且不会与 MVC 路由匹配。使@Url.Action 无法解析。

为了解决这个问题，我通过RouteDirection 创建了一个自定义约束过滤，当它是 UrlGeneration 时匹配默认路由（这是它尝试解析 @Url.Action 时的值）。

这是我最终路由的样子：

public class AngularConstraint : IRouteConstraint
{
    public bool Match
    (
        HttpContextBase httpContext,
        Route route,
        string parameterName,
        RouteValueDictionary values,
        RouteDirection routeDirection
    )
    {
        return routeDirection == RouteDirection.UrlGeneration ||
               !httpContext.Request.Path.StartsWith("/app", StringComparison.InvariantCultureIgnoreCase);
    }
}

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            "Default",
            "{controller}/{action}/{id}",
            new {controller = "Home", action = "Index", id = UrlParameter.Optional},
            new
            {
                AngularConstraint = new AngularConstraint()
            }
        );

        routes.MapRoute(
            "angular",
            "{*url}",
            new {controller = "App", action = "Index"}
        );
    }
}