在 Angular 中什么时候应该使用 href 而不是 routerLink？

Question

当我在 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/#46dd14376d7d
https://about.google/
https://www.colgate.es/
https://marketingplatform.google.com/intl/es/about/enterprise/

提前致谢

Answer 1

当我们在 angular 中使用 href 时，应用会丢失其状态，整个应用会重新加载。但是当我们使用 routerlink 时，应用程序的状态保持不变例如。假设您的 angular 项目中有两个 pages/component，分别命名为 second 和 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>

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

让我们看看屏幕后面发生了什么：-

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

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

如果您阻止 href 的默认操作，您将看到该页面不会重新加载 routerlink 中发生的事情，这很简单意味着 routerlink 也使用 href 进行导航，但会阻止其默认行为。

Answer 2

使用 href 用于外部链接，它与 a 标签一起使用，routerLink 用于路由。您不能将 href 与任何其他标签一起使用，只能将 a 标签与其他标签一起使用，但您可以将 routerLink 装饰器与其他标签一起使用。

href 是 a 标签的属性，routerLink 是 Angular 装饰器。

在 Angular 中什么时候应该使用 href 而不是 routerLink？

When should href be used instead of routerLink in Angular?

href

angular-routing

angular

angular-router

angular-routerlink