从 MVC 站点路由到 Angular 2 个应用程序

Question

在我不断寻求以某种方式从遗留 MVC 网站逐页路由到 Angular 2 SPA 的过程中，我最终得出的结论是最好使用 Angular 2 路由立即生效，也就是说，没有查询参数转换为有效的 Angular 2 路由，因为事实证明那完全是一场噩梦。

在我的遗留网络应用程序中，计划是通过重定向到 AppController 上的相应操作来替换控制器操作代码，例如

public ActionResult Action1(int param1, int param2)
{
    return RedirectTo("Action1", "App", new { param1, param2 });
}

AppController 位于其自己的区域 (Areas.Web)，其中还包含 Angular 2 应用程序

public class AppController : Controller
{
    public ActionResult Index()
    {
        return new FilePathResult("~/Areas/Web/index.html", "text/html");
    }

    public ActionResult Action1(int param1, int param2)
    {
        return Redirect($"/Areas/Web#/{param1}/{param2}/action1");
    }
}

在 index.html 中，我将 base href 设置为

<base href="/Areas/Web/">

所以想法是让 ASP.NET MVC 抓取 index.html 并将其发送到浏览器，包括哈希位置，其计算结果应为

/<param1>/<param2>/action1

在 Angular 方面，对吗？

在我的 bootstrap 代码中，我确保使用了 HashLocationStrategy，

bootstrap(AppComponent, [provide(LocationStrategy, { useClass: HashLocationStrategy })])
    .then(success => console.log('Bootstrap success'))
    .catch(error => console.log(error));

app.component.ts 的路由如下：

@RouteConfig([
    { path: '/:param1/:param2/action1, name: 'Action1', component: Action1Component}
])

我假设此设置应该正确路由到 Action1Component，但事实并非如此。路由配置被完全忽略，Action1 的构造函数从不被调用。

我哪里出错了？

编辑： 一旦 Angular 应用运行实际有效的是

http://legacy.com/Areas/Web/<param1>/<param2>/action1

没有 # - 但按 F5 显然会破坏此策略。因此，不仅包含散列符号的 URL 是无效路由，而且没有散列标记的 URL 也是完全有效的。我很困惑....

Answer 1

好的，多亏了，终于弄明白了。诀窍是，除了引导应用程序外，永远不要提供 ROUTER_PROVIDERS：

import { bootstrap } from 'angular2/platform/browser';
import { provide } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import { 
  ROUTER_PROVIDERS, 
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';
import { AppComponent } from './app.component';

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    HTTP_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy }
)])
.then(success => console.log('Bootstrap success'))
.catch(error => console.log(error));

我的猜测是，与注入到组件中的任何其他服务一样，如果您在你的组件装饰器，因此覆盖了你为 HashLocationStrategy 配置的实例，因为 PathLocationStrategy 是默认的，你得到了。

从 MVC 站点路由到 Angular 2 个应用程序

Routing into Angular 2 app from MVC site

asp.net-mvc

angular

angular2-routing