Question

我试图在我的Angular 7应用中使用带有href的定位标记。当我单击链接时，URL在浏览器中更改，但页面无法导航到。如果我将target =“ _ self”放进去，它将起作用

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

但是这不仅不能在浏览器中更改网址，而且什么也没发生

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

就像我使用Angular路由并使用RouterLink一样。

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

任何人都可以解释这种行为。

Answer 1

Href 是Html提供的用于浏览页面的基本属性，该页面在点击时重新加载页面。

routerLink 是angular提供的属性，用于导航到不同的组件而无需重新加载页面。

两者之间的主要区别是 href杀死了当前页面的状态，其中 routerLink不会丢失页面的状态。

例如如果页面中存在输入文本框，则routerLink将在导航后保留其值。通过覆盖诸如页面重新加载之类的某些功能，可以将 routerLink视作href的自定义属性。 / p>

Answer 2

有时，例如，如果您使用的是非角度网络组件，则无法使用routerLink。

我用来解决刷新问题的一种解决方法是检查所有“ 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 3

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

routerLink加载Angular内部的资源，并且永远不会完全重新加载浏览器中加载的页面（因此应用程序状态得以保持。）这种情况的一个提示是浏览器的加载指示器：

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

这是我在开发，状态重置时经常检查的内容。有时问题是我使用href而不是routerLink。

Answer 4

使用href导航：

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

骇客是通过阻止默认行为来实现的。

例如：

内部模板：

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

直接使用 href 告诉浏览器以打开链接作为新的，以便该应用重新加载并仍链接到已为其配置的确切页面。

routerLink 基于doc，无需使用内部api即可重新加载该应用。

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

Answer 6

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

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

要了解更多信息，请查看这篇文章Angular Routing

Answer 7

Bytech给出了正确的答案，但是在某些情况下，您可能希望在angular中使用href。例如，我有一个应用程序，其中包含多个项目。在链接上，我想从商店项目导航到成员门户项目。在这种情况下，由于使用两个路由器链接在两个不同的基本URL（在本例中为dev环境，其localhost：4201 && localhost：4202）提供服务，因此它们实际上不会将您路由到另一个基本路由位置。必须使用href，否则将无法将您路由到正确的网址。

锚href vs角路由器

7 个答案: