锚点 href 与角度路由器链接

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 会杀死当前页面的状态，而routerLink 不会丢失页面的状态。

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

Answer 2

使用 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 3

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

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

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

当我的状态重置时，我总是在开发时检查这一点。有时问题是我使用了 href 而不是 routerLink。

Answer 4

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

根据doc，routerLink无需使用内部 api 重新加载即可导航应用程序。

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