Это странная проблема, которую я не могу отладить и не выдает никаких ошибок в журналах. У меня есть настройки страницы с mat-tab-nav-bar с 3 кнопками на панели инструментов, используя routerLink="" для подключения к различным страницам.
Шаблон компонента панели инструментов выглядит примерно так.
<nav mat-tab-nav-bar class="bottom-toolbar">
<a mat-tab-link routerLink="/articles" routerLinkActive="active">
Articles
</a>
<a mat-tab-link routerLink="/categories" routerLinkActive="active">
Categories
</a>
<a mat-tab-link routerLink="/settings" routerLinkActive="active">
Settings
</a>
</nav>
Этот компонент панели инструментов называется app.component.html вместе с <router-outlet></router-outlet>
FYI, маршруты для /articles, /categories и /settings - все они вызывают отдельные функциональные модули, и ни один из них не загружен с отложенной загрузкой. Маршрут /articles имеет охрану canActivate, а маршруты /categories и /settings - нет (я отключил их в целях тестирования).
Теперь к проблеме. Приложение прекрасно загружается, проходя проверку подлинности пользователя и все такое, и обычно попадает на страницу «Статьи».
На странице «Статьи», когда пользователь нажимает на «Категории», Angular выполняет полную перезагрузку страницы, чтобы загрузить страницу «Категории». Когда пользователь щелкает обратно, приложение возвращается на страницу «Статьи» без полной перезагрузки страницы. Когда пользователь снова щелкает ссылку «Категории», на этот раз маршрутизация страницы «Категории» работает должным образом. Так что он ломается только с первой попытки.
То же поведение для страницы настроек.
Если я отключил защиту canActivate для всех 3-х маршрутов, все маршруты работают должным образом.
Так что же заставляет routerLink полностью перезагрузить маршрут при первом нажатии?