托管 Angular 应用程序路由的 MVC 应用程序不适用于第一次导航答案

【问题标题】：MVC app hosting Angular app routing not working on first navigation托管 Angular 应用程序路由的 MVC 应用程序不适用于第一次导航
【发布时间】：2020-02-07 00:40:17
【问题描述】：

我在 MVC 页面上托管的 Angular 应用程序中导航时遇到问题，它大部分都在工作，但有一种情况导致 URL 发生更改，但应用程序不显示新页面。

我将尝试将设置分解为最简单的形式，（此问题发生在大型企业应用程序中）

我们有一个包含 2 个页面的 MVC 应用程序，主页和应用程序。两者都有控制器和视图。主页 index.cshtml 是一个简单的 Razor 视图，应用程序 index.cshtml 上仅定义了 <app-root></app-root> 元素。两个视图都使用一个基本布局页面，该页面定义了整个应用的导航菜单。

在菜单中，我们有 4 个锚标记：

href="/home"
href="/app/#/page1"
href="/app/#/page2"
href="/app/#/page3"

在 Angular 方面，我们有 3 个页面（page1、page2 和 page3）。路由也相当简单：

    Routes = [
    {
        path: 'page1',
        component: Page1Component,
    },
    {
        path: 'page2',
        component: Page2Component,
    },
    {
        path: 'page3',
        component: Page3Component,
    },
];
@NgModule({
    imports: [RouterModule.forRoot(routes , { useHash: true, enableTracing: true } )],
    exports: [RouterModule]
})

现在，如果我在主页上并单击第 1 页的链接，一切正常。页面发生变化，角度应用程序加载，一切都很好。

如果我现在单击第 2 页的链接，URL 会更改，但 Angular 应用程序不会加载新组件。（查看控制台，路由器跟踪未显示）。现在它处于这种“错误”状态，我可以单击第 3 页并且它可以工作。 URL 更改和第 3 页组件加载。如果我现在点击第 2 页，它也可以工作。

应用程序现在可以正确导航，直到我返回主页 (MVC) 页面。从那时起，我们回到上述情况，第一个导航有效，第二个导航无效（但 URL 更新），所有进一步的导航都有效。

注意：如果我在有角度的页面（Page1、Page2 和 Page3）上添加链接并使用 routerLink 属性，那么我看不到问题。只有在使用带有 HRef 的锚标记时才会出现问题。

不幸的是，导航菜单位于 MVC 基本页面上（它是一个非常大的企业应用程序），我无法将其重写为 Angular 组件。

任何帮助将不胜感激。

【问题讨论】：

标签： angular asp.net-mvc routing

【解决方案1】：

尝试改变

            href="/app/#/pageX"

到

            href="/pageX"

【讨论】：

但这在从 MVC 页面导航时不起作用，因为它需要知道要加载 (app) 的 MVC 路由，它会加载 Angular 应用程序。

【解决方案2】：

目前我已通过向链接添加 onclick 处理程序来解决此问题。

这只是将 window.location.href 的值设置为与 a 标签的 href 值相同。

不知道为什么，但它现在会在第一次点击时导航，并且如果在 Angular 应用程序中导航，它足够聪明，不会刷新整个页面。

感觉不是正确的解决方案，但目前正在使用的解决方案

【讨论】：