什么时候应该在 Angular 中使用 href 而不是 routerLink? [英] When should href be used instead of routerLink in Angular?

问题描述

当我在 Angular 中开发并创建视图时，我总是使用 routerLink 从一个视图导航到另一个视图.最近我看到用 Angular 制作的重要页面使用 href 而不是 routerLink 来路由网站上的视图.我的问题是，什么时候在 Angular 中使用 href 而不是 routerLink 方便，为什么?是不是给人一种不是SPA的感觉?

如果是这样，我不明白，因为它失去了 Angular 路由的全部潜力.

一些例子是

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

提前致谢

解决方案

当我们在 angular 中使用 href 时，应用会丢失其状态并且整个应用会重新加载.但是当我们使用 routerlink 时，应用程序的状态保持不变例如.假设您的 angular 项目中有两个页面/组件，分别命名为第二个和第三个.

<p>使用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>
<小时><div class="nav"><p>使用routerLink"</p><ul><li><a routerLink="/">1</a></li><li><a routerLink="/second">2</a></li><li><a routerLink="/third">3</a></li>

<小时><div class="page-content"><p>页面内容</p><路由器插座></路由器插座><小时><p>输入字段</p><app-input></app-input>

在上面的示例中，如果您在输入字段中输入内容并使用 href 导航进行导航，则该状态将丢失.但是当您使用 routerlink 导航进行导航时，您将获得该输入文本.

让我们看看屏幕后面会发生什么:-

<li><a href="/second" (click)="onClick($event)">2</a></li>onClick(事件:事件){event.preventDefault();}

如果您阻止了 href 的默认操作，您将看到该页面不会重新加载 routerlink 中发生的情况，这仅意味着 routerlink 也使用 href 进行导航，但通过防止其默认行为.

When I develop in Angular and create views, I always use the routerLink to navigate from one view to another. Recently I have seen important pages made in Angular that use href instead of routerLink to route views on the website. My question is, when is it convenient to use href instead of routerLink in Angular and why? Is it to give the feeling that it is not a SPA?

If so, I do not understand it because it loses the full potential of Angular routing.

Some examples are

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/

Thanks in advance

解决方案

When we use href in angular the app loses its state and the entire app gets reloaded. But when we use routerlink the state of the app remains the same E.g. Let's assume you have two pages/component in your angular project named as second and third.

<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>

In the above example, if you type something in the input filed and use href navigation to navigate then the state of that will get losses. But when you use routerlink navigation to navigate you will have that input text.

Let's see what happens behind the screen:-

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

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

if you prevent the default action of href you will see that page will not get reloaded that what happens in routerlink, this simply means that routerlink also used href for navigation but by preventing its default behaviour.

这篇关于什么时候应该在 Angular 中使用 href 而不是 routerLink?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！