Question

我在MVC页面上托管的Angular应用程序中导航时遇到问题，它可以正常工作，但有1种情况导致URL更改，但应用程序未显示新页面。

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

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

在菜单中，我们有4个锚标签，分别为：

href =“ / home”
href =“ / app /＃/ page1”
href =“ / app /＃/ page2”
href =“ / app /＃/ page3”

在“角度”侧，我们有3页（第1页，第2页和第3页）。路由也相当简单：

    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页组件加载。如果我现在单击Page 2，它也可以正常工作。

该应用程序现在将正确导航，直到我移回到主页（MVC）页面。从那时起，我们回到上面的情况，第一个导航有效，第二个导航无效（但URL更新），所有其他导航正常工作。

注意：：如果我在有角页面（Page1，Page2和Page3）上添加链接并使用routerLink属性，则看不到问题。仅当将锚标记与HRef一起使用时，此问题才会出现。

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

任何帮助将不胜感激。

Answer 1

尝试更改

            href="/app/#/pageX"

到

            href="/pageX"

Answer 2

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

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

不知道为什么，但是它现在可以在第一次单击时导航，并且足够聪明，即使在Angular应用程序中导航也不会刷新整个页面。

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

托管Angular应用程序路由的MVC应用程序在首次导航中不起作用

2 个答案: