锚点href vs 角度路由器链接

Posted 2023-02-22

【中文标题】锚点href vs 角度路由器链接

【英文标题】：anchor href vs angular routerlink

【发布时间】：2020-01-24 15:22:24

【问题描述】：

我正在尝试在我的 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>

谁能解释一下这种行为。

【问题讨论】：

在到达<a routerLink="/abcd" routerLinkActive="active">Abcd</a> 之前查看您的代码，您应该输入<router-outlet>。由此，我们可以看出我们正在使用路由。

你确定你的语法正确吗....尝试用方括号括起来.... 确保您在 route.ts 文件中正确指定了路径。

如果您使用href，则调用不在您的应用程序中的页面routerLink 是相反的

我知道 href 是对应用程序外部页面的调用，但为什么它需要 target="_self"。否则浏览器的 URL 值会改变，但浏览器不会去 url。

【参考方案1】：

Href 是 html 提供的用于浏览页面的基本属性，点击后会重新加载页面。

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

两者的主要区别在于 href 会杀死当前页面的状态，而 routerLink 不会丢失页面的状态。

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

【参考方案2】：

有时你不能使用 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();
    
  

【参考方案3】：

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

【参考方案4】：

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

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

更多了解请查看这篇文章Angular Routing

【参考方案5】：

使用 href 导航：

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

而 hack 是通过阻止默认行为。

例如：

内模板：

 <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 指令中模仿上述行为

【参考方案6】：

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

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

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

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

【参考方案7】：

直接使用href告诉浏览器打开链接作为新的，这样应用就会重新加载 strong> 并且仍然链接到为其配置的确切页面。

基于doc，routerLink 使用内部 api 在不重新加载的情况下导航应用程序。

您可以点击使用 href 和 routerLink 的链接查看区别demo