У меня проблема с навигацией в приложении Angular, размещенном на странице MVC, оно в основном работает, но 1 сценарий вызывает изменение URL, но приложение не показывает новую страницу.
Я попытаюсь разобрать настройку в ее простейшей форме (эта проблема возникает в крупных корпоративных приложениях)
У нас есть приложение MVC с 2 страницами, домашнее и приложение. У обоих есть контроллеры и представления. Домашний index.cs html представляет собой простое представление Razor, и в приложении index.cs html определен только элемент <app-root></app-root>. Оба представления используют базовую страницу макета, которая определяет меню навигации для всего приложения.
В меню у нас есть 4 тега привязки с:
- href = "/ home"
- href = "/ app / # / page1"
- href = "/ app / # / page2"
- href = "/ app / # / page3"
Со стороны Angular у нас есть 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, все работает. Страница меняется, приложение angular загружается и все замечательно.
Если я сейчас нажму на ссылку для страницы 2, URL изменится, но приложение angular не загрузит новый компонент. (Глядя на консоль, трассировка маршрутизатора не отображается). Теперь, когда она находится в состоянии «ошибка», я могу нажать на страницу 3, и она работает. Изменения URL и загрузка компонента страницы 3. Если я теперь нажму на страницу 2, она тоже будет работать.
Приложение теперь будет правильно перемещаться, пока я не вернусь на домашнюю (MVC) страницу. С этого момента мы возвращаемся к описанной выше ситуации: первая навигация работает, вторая навигация не работает (но URL-адреса обновляются) и все дальнейшие навигации работают.
Примечание: Если я добавляю ссылки на angular страниц (Page1, Page2 и Page3) и использовать атрибут routerLink, тогда я не вижу проблемы. Проблема возникает только при использовании тегов привязки с HRef.
К сожалению, поскольку навигационное меню находится на MVC базовой странице (и это очень большое корпоративное приложение), я не могу переписать это как Angular компонент.
Любая помощь будет оценена.