ASP.NET 5 + Angular 2 路由(模板页面不重新加载) [英] ASP.NET 5 + Angular 2 routing (template page not REloading)

问题描述

Angular 2 beta 默认使用 html5 路由.但是，当您转到某个组件并且路由发生变化时(例如 http://localhost:5000/aboutus)并且您重新加载/刷新页面，没有加载任何内容.

Angular 2 beta uses html5 routing by default. However, when you go to a component and the route changes (eg http://localhost:5000/aboutus) and you reload/refresh the page, nothing is loaded.

此问题已在此发布也.大多数答案都说，如果我们要在 angular 2 中追求 HTML5 路由，那么应该在服务器端处理这个路由问题.更多讨论此处.

The issue has been raised in this post also. Most of the answers say that if we are going to pursue HTML5 routing in angular 2, then this issue of routing should be taken care of in server-side. More discussion here.

我不确定如何使用 asp.net 服务器环境处理此问题.

I am not sure how to handle this issue using the asp.net server environment.

任何 angular 2 开发人员也使用 asp.net 并遇到此问题?

Any angular 2 devs out there who also uses asp.net and encounters this issue?

附注.我使用的是 ASP.NET 5.我的 Angular 2 路由使用的是 MVC 路由.

PS. I'm using ASP.NET 5. My Angular 2 routes are using MVC routes.

推荐答案

您看到的问题与客户端上的 Angular 路由和 MVC 服务器端路由之间的差异有关.您实际上收到了 404 Page Not Found 错误，因为服务器没有该路由的控制器和操作.我怀疑您没有处理错误，这就是为什么它看起来好像什么也没发生.

The problem you're seeing has to do with the difference between Angular routing on the client and MVC server-side routing. You are actually getting a 404 Page Not Found error because the server does not have a Controller and Action for that route. I suspect you are not handling errors which is why it appears as if nothing happens.

当您重新加载 http://localhost:5000/aboutus 或尝试直接从快捷方式链接到该 URL 或通过在地址栏中键入(深层链接)时，它向服务器发送请求.ASP.NET MVC 将尝试解析该路由，在您的情况下，它将尝试加载 aboutusController 并运行 Index 操作.当然，这不是你想要的，因为你的 aboutus 路由是一个 Angular 组件.

When you reload http://localhost:5000/aboutus or if you were to try to link to that URL directly from a shortcut or by typing it into the address bar (deep linking), it sends a request to the server. ASP.NET MVC will try to resolve that route and in your case it will try to load the aboutusController and run the Index action. Of course, that's not what you want, because your aboutus route is an Angular component.

您应该做的是为 ASP.NET MVC 路由器创建一种方法，将应由 Angular 解析的 URL 传递回客户端.

What you should do is create a way for the ASP.NET MVC router to pass URLs that should be resolved by Angular back to the client.

在您的 Startup.cs 文件中，在 Configure() 方法中，将spa-fallback"路由添加到现有路由:

In your Startup.cs file, in the Configure() method, add an "spa-fallback" route to the existing routes:

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

    // when the user types in a link handled by client side routing to the address bar 
    // or refreshes the page, that triggers the server routing. The server should pass 
    // that onto the client, so Angular can handle the route
    routes.MapRoute(
        name: "spa-fallback",
        template: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
});

通过创建指向最终加载 Angular 应用程序的控制器和视图的包罗万象的路由，这将允许将服务器未处理的 URL 传递到客户端以进行正确路由.

By creating a catch-all route that points to the Controller and View that ultimately loads your Angular app, this will allow URLs that the server does not handle to be passed onto the client for proper routing.

这篇关于ASP.NET 5 + Angular 2 路由(模板页面不重新加载)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！