Angular 2-динамически меняющийся URL (в адресной строке)

Question

Angular 2-динамически меняющийся URL (в адресной строке)

Я столкнулся с этим поведением на веб-сайте 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 в адресной строке при прокрутке страницы или что-то в этом роде.

593 3

angular angular2-routing

3 ответов:

Comments

Ничего не найдено.

Milad · Accepted Answer · 2018-05-25 07:19:05

У вас будет два варианта: использовать хэш ( # ) или не использовать его:).

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

И вам нужно будет сказать:
 RouterModule.forRoot( ROUTES , { useHash : false } )

Karbos 538 · Accepted Answer · 2016-12-12 12:32:54

Вы можете управлять текущим якорем, как вы хотите, в Javascript без перезагрузки страницы. Итак, когда вы устанавливаете свой url с помощью:
location.href = location.href+ "#1234";   
Вы не будете перезагружать страницу, пока "1234" не будет означать что-то для маршрутизатора.

Srikkant Srinivasan · Accepted Answer · 2017-08-18 14:34:08

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

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

Допустим, у вас есть этот маршрут, который отображает item Component.
item/:id
Когда вы ориентируетесь вот так.
item/3 -> item/4
Компонент больше не инициализируется. Я воспользовался этим и в зависимости от моего тока расположившись на странице, я перешел к нужному URL в адресной строке. Это звучит не совсем убедительно, но это действительно работает.