0

我正在使用 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.
4

1 回答 1

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>

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

为了解决这个问题，我通过 RouteDirection 创建了一个自定义约束过滤，当它是UrlGeneration时匹配 Default 路由（这是它尝试解析 @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"}
        );
    }
}
于 2018-04-25T13:23:01.560 回答