锚href vs angular路由器链接

Question

我正在尝试在我的 Angular 7 应用程序中使用带有 href 的锚标记。 当我单击链接时，浏览器中的 url 会发生变化，但页面没有导航到。 如果我放 target="_self" 就可以了，所以这行得通

<a href="/abcd" target="_self">Abcd</a>

但这仅对浏览器中的 url 更改不起作用但没有任何反应

<a href="/abcd">Abcd</a>

好像我使用 Angular 路由并使用 RouterLink 它可以工作。

<a routerLink="/abcd" routerLinkActive="active">Abcd</a>

谁能解释一下这种行为。

Answer 1

Href 是Html提供的基本属性，用于在单击时重新加载页面的页面导航。

routerLink是 angular 提供的属性，用于在不重新加载页面的情况下导航到不同的组件。

两者之间的主要区别在于href 会杀死当前页面的 state 而 routerLink 不会丢失页面的 state 。

例如。 如果页面中存在输入文本框，则routerLink在导航后将保留其值。routerLink可以被认为是angular中href的自定义属性，通过覆盖页面重新加载等一些功能

Answer 2

使用 href 导航：

href 是浏览器提供的用于在页面之间导航（切换）的默认属性，其中整个页面将被重新加载而丢失当前的 state。

而黑客是通过防止默认行为。

例如：

内模板：

 <a href="route" (click)=onClick($event) />

内部组件：

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

在 href 中使用 target 属性：

Please refer to https://www.w3schools.com/tags/att_link_target.asp

使用 routerLink 导航：

Angular 在 routerLink 指令中模仿上述行为

Answer 3

Angular 应用是单页应用 (SPA)。 使用 href 打破了这种设计模式。 效果是每个使用 href 的导航都会完全重置您的应用程序 state。 使用 Angular 或任何其他 SPA 时，请始终避免使用 href。

routerLink 加载 Angular 内部的资源，并且在浏览器中加载的页面永远不会完全重新加载（因此应用程序 state 被维护。）这种情况的线索是浏览器的加载指示器：

当遵循传统链接时，您会在浏览器中看到微调器正在运行（在选项卡上，或者在大多数情况下通过地址栏）。当您等待 Angular 组件加载时，该微调器将处于空闲状态。

这是我在开发时总是检查的东西，当我的 state 重置时。 有时问题是我使用了 href 而不是 routerLink。

Answer 4

使用href直接告诉浏览器以新链接的形式打开链接，这样应用程序将被重新加载并仍然链接到已配置的确切页面。

根据文档， routerLink使用内部 api 导航应用程序而无需重新加载。

您可以单击使用href和routerLink的链接查看差异演示

Answer 5

有时您不能使用 routerLink，例如，如果您在非 angular web 组件中。

我用来解决刷新问题的一种解决方法是检查所有“a”标签的点击，如果 routerlink 属性不存在，则阻止默认行为，然后使用路由器导航。

  @HostListener('window:click', ['$event'])
  onClick(e: any) {
    const path = e.composedPath() as Array<any>;
    const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
    if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
      const href = firstAnchor.getAttribute('href');

      this.router.navigateByUrl(href);

      e.preventDefault();
    }
  }

Answer 6

Bytech 有一个正确的答案，但有时您想在 angular 中使用 href。 例如，我有一个应用程序，其中包含多个项目。 在一个链接上，我想从商店项目导航到成员门户项目。 在这种情况下，因为它们在两个不同的基本 url 上提供服务（在这种情况下，对于开发环境，它的 localhost:4201 && localhost:4202）使用路由器链接实际上不会将您路由到另一个基本路由位置。 需要使用 href，否则它将无法将您路由到正确的 url。

Answer 7

如果您在 angular 应用程序中使用 href，请避免使用它。 Angular 具有路由器功能，其中 routerLink 是其中的一部分。

<p routerLink='/path'>Text</p>

如需更多了解，请查看本文Angular 路由