Angular Маршрутизация с фрагментом Ха sh не работает, если дважды щелкнуть один и тот же якорь

Question

Я пытаюсь перенаправить на страницу, используя фрагмент в теге привязки. В первый раз он работает нормально, но когда я прокручиваю страницу вверх вручную и снова нажимаю ссылку привязки, она не работает.

<a class="nav-link page-scroll" [routerLink]="['/']" fragment="home">Home</a>
<a class="nav-link page-scroll" [routerLink]="['/']" fragment="about">About</a>

Я загрузил свой код на StackBlitz

Нажмите на О , и вы увидите прокрутку страницы. Прокрутите вверх вручную и снова нажмите О , на этот раз ничего не произойдет. Я с нетерпением жду ваших предложений о том, как это исправить.

Answer 1

Это происходит потому, что вы используете маршрутизатор Angular для доступа к фрагменту, который динамически загружает необходимые компоненты на стороне клиента, не выполняя новый запрос к серверу.

У вас есть 3 возможных решения:

1. откажитесь от использования Angular Router и просто используйте старую простую <a href="#fragment">. Тот факт, что существует способ Angular, не означает, что использование стандартных функций HTML запрещено

2. Не обновляйте URL, таким образом, ваша сеть приложение не знает, нажали ли вы на якорь или нет, и всегда будет прокручивать до элемента. Вы можете сделать это, установив атрибут [skipLocationChange]="true", как вы можете видеть в этом форке вашего StackBlitz

3. Используйте одно из многих решений, представленных в этот вопрос StackOverflow

Я думаю, что лучшее решение - это решение, основанное на <a href.

. Используйте [routerLink] в сочетании с [fragment], когда Вы хотите добраться до фрагмента другого маршрута . Не тогда, когда вы хотите добраться до фрагмента внутри того же маршрута.

Надеюсь, это будет полезно