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

Question

当我在 Angular 中开发并创建 View 时，我总是使用 routerLink 从一个 View 导航到另一个 View 。最近我看到用 Angular 制作的重要页面使用 href 而不是 routerLink 来路由网站上的 View 。我的问题是，什么时候在 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 项目中有两个页面/组件，分别命名为第二个和第三个。

<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 进行导航，但阻止了它的默认行为。