Угловой 2 - Динамически изменяющийся URL-адрес (в адресной строке)

Question

Я столкнулся с этим поведением на веб-сайте ESPN и задавался вопросом, как достичь этого, используя Angular2. Когда я читаю статью там, как только статья будет завершена, следующая статья загружается, и URL-адрес в адресной строке автоматически изменяется. Как только я перейду к старой статье, URL снова изменится на старый. Например, воспользуйтесь этой ссылкой.

http://www.espn.in/football/barclays-premier-league/23/blog/post/3017450/phil-jones-and-henrikh-mkhitaryan-in-team-of-the-weekend

Это просто случайная статья с сайта. Вы можете проверить поведение, упомянутое выше. Я также видел, что сайт ESPN не был построен с помощью Angular 2.

Тем не менее, мне было просто интересно, хочу ли я сделать это с помощью Angular2, как мне продолжить? То есть, чтобы изменить URL-адрес в адресной строке при прокрутке страницы или что-то в этом роде.

Answer 1

В случае, если кто еще хочет решить эту проблему.

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

Скажем, у вас есть этот маршрут, который отображает ItemComponent.

item/:id 

Когда вы перемещаетесь следующим образом.

item/3 -> item/4 

Компонент не инициализируется снова. Я использовал это и в зависимости от моей текущей позиции на странице, я перешел к URL-адресу, который мне нужен в адресной строке. Это звучит не совсем убедительно, но оно действительно работает.

Answer 2

Вы можете манипулировать текущим якорем, как хотите, в Javascript без перезагрузки страницы. Таким образом, когда вы устанавливаете свой адрес с:

location.href = location.href+ "#1234"; 

Вы не перезагрузите страницу до «1234» означает что-то для маршрутизатора.

Answer 3

Вам придется выбирать, используя hash (#) или не используя его :).

Чтобы не использовать хеш, вам нужно сообщить серверу, чтобы перенаправить весь запрос на index.html, иначе он не будет работать должным образом.

И вы должны были бы сказать:

RouterModule.forRoot(ROUTES , { useHash : false })