Когда следует использовать href вместо routerLink в Angular?

Когда я разрабатываю в Angular и создаю представления, я всегда использую routerLink для перехода от одного представления к другому. Недавно я видел важные страницы, сделанные в Angular, которые используют href вместо routerLink для маршрутизации просмотров на веб-сайте. У меня вопрос, когда удобно использовать href вместо routerLink в Angular и почему? Это для того, чтобы создать ощущение, что это не СПА?

Если да, то я этого не понимаю, потому что он теряет весь потенциал маршрутизации Angular.

Некоторые примеры

https://brandstory.in/
https://www.forbes.com/sites/karstenstrauss/2019/01/22/the-most-sustainable-companies-in-2019/#46dd14376d7d
https://about.google/
https://www.colgate.es/
https://marketingplatform.google.com/intl/es/about/enterprise/

заранее спасибо


angular angular-routing angular-routerlink href angular-router
person Mr. Mars    schedule 30.10.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Когда мы используем href в angular, приложение теряет свое состояние, и все приложение перезагружается. Но когда мы используем routerlink, состояние приложения остается прежним. Предположим, у вас есть две страницы/компонента в вашем угловом проекте, названные второй и третьей.

<div class="nav">
  <p>Using "href"</p>
  <ul>
    <li><a href="/" >1</a></li>
    <li><a href="/second" (click)="onClick($event)">2</a></li>
    <li><a href="/third">3</a></li>
  </ul>
</div>
<hr>
<div class="nav">
  <p>Using "routerLink"</p>
  <ul>
    <li><a routerLink="/">1</a></li>
    <li><a routerLink="/second">2</a></li>
    <li><a routerLink="/third">3</a></li>
  </ul>
</div>
<hr>
<div class="page-content">
  <p>Page Content</p>
  <router-outlet></router-outlet>
  <hr>
  <p>Input Field</p>
  <app-input></app-input>
</div>

В приведенном выше примере, если вы введете что-то в поле ввода и используете навигацию href для навигации, тогда состояние этого будет потеряно. Но когда вы используете навигацию routerlink для навигации, у вас будет этот вводимый текст.

Давайте посмотрим, что происходит за экраном: -

<li><a href="/second" (click)="onClick($event)">2</a></li>

onClick(event: Event) {
    event.preventDefault();
  }

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

person Aniket    schedule 30.10.2019
comment
Прежде всего, спасибо за ваш ответ. Я понимаю, как они оба работают, но сомнения более философские или более ориентированы на поиск смысла того, что я упоминаю в вопросе. Какова мотивация использования href в Angular вместо routerLink. Примером может служить brandstory.in (созданный с помощью Angular 7 и SSR), в котором все ссылки в главном меню сделаны с помощью href вместо routerLink, несмотря на то, что это внутренние маршруты страницы. Я пытаюсь понять, может ли это создать ощущение, что это не SPA, поскольку это происходит на многих страницах, созданных в Angular и находящихся в Интернете. - person Mr. Mars; 31.10.2019
comment
Я понимаю, как это работает. Спасибо. Но если я заблокирую поведение href по умолчанию, навигация не будет работать, не так ли? Я только избегаю перезагрузки страницы, но навигация не происходит. - person Mr. Mars; 31.10.2019
comment
Да, если вы предотвратите поведение, навигация не будет работать. Но вы можете сделать что-нибудь еще, что делает routerlink для достижения задачи. - person Aniket; 31.10.2019
comment
Да, я полагаю, что routerLink предотвращает поведение href по умолчанию, а затем применяет свою собственную логику для загрузки новых компонентов и, следовательно, новых представлений. И что может быть причиной того, что некоторые страницы, созданные с помощью Angular, используют поведение по умолчанию href (перезагрузка страницы) вместо Angular routerLink? Заранее спасибо. - person Mr. Mars; 31.10.2019
comment
То, как эта страница должна загружаться, полностью зависит от разработчика и требований проекта. Я не думаю, что угловая страница по умолчанию использовала поведение href. Это зависит от подхода и от того, как разработчик выполнил эту задачу. - person Aniket; 31.10.2019
comment
Спасибо за ваше время и терпение. Я приму этот ответ как правильный. - person Mr. Mars; 31.10.2019

arrow_upward
1
arrow_downward

Используйте href для внешних ссылок, которые используются с тегом a и routerLink для маршрутов. Вы не можете использовать href с любыми другими тегами, кроме тега a, но вы можете использовать декоратор routerLink с другими тегами.

href — это атрибут тега a, а routerLink — декоратор Angular.

person Maihan Nijat    schedule 30.10.2019
comment
Прежде всего, спасибо за ваш ответ. Я понимаю, как они оба работают, но сомнения более философские или более ориентированы на поиск смысла того, что я упоминаю в вопросе. Какова мотивация использования href в Angular вместо routerLink. Примером может служить brandstory.in (созданный с помощью Angular 7 и SSR), в котором все ссылки в главном меню сделаны с помощью href вместо routerLink, несмотря на то, что это внутренние маршруты страницы. Я пытаюсь понять, может ли это создать ощущение, что это не SPA, поскольку это происходит на многих страницах, созданных в Angular и находящихся в Интернете. - person Mr. Mars; 31.10.2019