在 Angular 中什么时候应该使用 href 代替 routerLink?

2024-02-05

当我在 Angular 中开发并创建视图时,我总是使用 routerLink 从一个视图导航到另一个视图。最近我看到用 Angular 制作的重要页面使用 href 而不是 routerLink 来路由网站上的视图。我的问题是,什么时候在 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/

提前致谢


当我们使用href在角度中,应用程序会丢失其状态,并且整个应用程序会重新加载。但是当我们使用路由器链接应用程序的状态保持不变 例如。假设您的 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导航去导航的话那个状态就会得到损失。但是当你使用路由器链接导航 导航您将获得该输入文本。

让我们看看屏幕后面发生了什么:-

<li><a href="/second" (click)="onClick($event)">2</a></li>

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

如果您阻止默认操作href您将看到该页面不会重新加载,发生的情况路由器链接,这仅仅意味着路由器链接也用过href用于导航,但阻止其默认行为。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular 中什么时候应该使用 href 代替 routerLink? 的相关文章

随机推荐

  • 预加载组件

    在工作中 我们使用 DevExpress 作为用户界面 第一次打开使用 DevExpress 控件的表单时 会出现很长的暂停 在某些客户端上有时会出现 15 20 秒 在 Visual Studio 中 我可以看到该阶段正在加载大量程序集
  • CSS3可计算表达式?

    是否有任何技术允许在 css3 语句中使用表达式 通常 做以下事情是有帮助的 width 35 20px或类似的 目前 针对这些情况 我唯一的解决方案是重新设计页面或使用 javascript 动态设置 css CSS 关于值和单位的工作草
  • 调试类型初始值设定项中的异常

    我有一个静态类 没有静态构造函数 但有许多静态成员 第一次使用该类时 我抛出 TypeInitializationException 我正在打破 CLR 异常 并且已禁用 仅我的代码 问题是我只有在第一次使用这个类时才会得到这个异常 我不会
  • 如何在 ASP.NET MVC 5 中插入主从表

    I have Orders表和订单详细信息数据库中的表 通过 Entity Framework 6 我获得了一个模型 因此我可以从它生成类 我还从 Orders 表生成了控制器和视图 Orders folio PK date custome
  • ssl_transport_security.cc:599] 无法加载任何根证书

    我尝试使用 hyperledger composer fabric v0 19 0 创建自己的网络 网络构建似乎不错 但是当我执行composer network install 我收到这个错误 Composer Install Insta
  • 在 Spring 中使用 RestTemplate。异常 - 没有足够的变量可用于扩展

    我正在尝试访问 API 的内容 并且需要使用 RestTemplate 发送 URL String url1 http api example com Search key 52ddafbe3ee659bad97fcce7c53592916
  • XPath 在两个 HTML 注释之间进行选择?

    我有一个很大的 HTML 页面 但我想使用 Xpath 选择某些节点 div some text div div p Some more elements p div 我可以在之后选择 HTML using comment begin co
  • ImageView setImageBitmap 在 onTouch 内的复杂布局中间歇性地不执行任何操作

    我有内部包含 ImageView 的嵌套布局 这些都在 ScrollView 内 最初 ImageView 被设置为 Drawable 资源 我用这个解决方案来检测卷轴 它是从内部调用的onTouchListener Android 检测
  • openssl 命令行验证签名

    您好 我已经生成了密钥对并使用私钥生成签名 openssl rsautl sign in helloworld txt inkey aa pem out sig 但是我无法使用我的公钥验证签名 openssl rsautl verify i
  • Open XML: Word - 将所有段落标记为“Heading1”样式

    我使用Word 创建了一个带有标准normal dot 的Docx 作为测试 Hello world 级别的复杂性 我希望得到all the paragraphs其样式为 Heading1 style在Word中 我可以获取所有段落 但不知
  • 如何在 SQL Server 查询中显示表结构?

    SELECT DateTime Skill Name TimeZone ID User Employee Leader FROM t Agent Skill Group Half Hour AS t 我需要在查询中查看表结构 对于 SQL
  • numpy 数组中负数的立方根返回 nan

    来自 Numpy 文档 gt gt gt a np arange 10 3 gt gt gt a array 0 1 8 27 64 125 216 343 512 729 gt gt gt a 2 8 gt gt gt a 2 5 arr
  • 如何在php中将unicode字符转换为阿拉伯字符?

    假设该字符串是 uni str 06280628002006280628 阿拉伯语是 bab bab 那么 我如何在不使用 html 的情况下将其转换为 php for i 0 i
  • UnsupportedOperation:无法执行非零相对端搜索:Python - PyPDF2

    你们能解决这个问题吗 我无法阅读阿拉伯语 PDF 文件 我不知道是什么问题 谢谢 import PyPDF2 def main with open arabic text pdf encoding utf 8 as pdfFile pdfR
  • C++ 指向非静态成员函数的指针

    我读过很多关于非静态成员函数指针的帖子和答案 但看起来没有一个能够解决我的问题 因此 我创建了一个简短的示例来复制我的问题 即使这个示例可以以不同的方式 解决 对于最终的软件来说 保持示例中的结构很重要 谢谢 这是 Funcs h 类的标头
  • 在使用 flutter_bloc 库调度事件之前等待一些结果

    我正在尝试创建一个 BLOC 它依赖于另外两个基于时间的块和一个非基于时间的块 我的意思是基于时间 例如他们正在连接远程服务器 因此需要时间 它的工作原理如下 登录 当然需要一些时间 如果登录成功 做另一个过程 这也需要时间 它返回一个未来
  • Elisp:如何将数据保存在文件中?

    我想将数据保存到我的 elisp 程序中的文件中 我有一个多维列表 我想将其保存到文件中 以便下次程序运行时可以恢复它 最简单 最好的方法是什么 当然 我意识到我可以简单地将数据以自定义格式写入缓冲区 然后保存缓冲区 但是当我想要恢复数据格
  • i 标签的 Alt 或 title 属性

    I use 字体真棒 http fortawesome github com Font Awesome 并像这样显示他们的字体 i class icon lock i 这将显示一个漂亮的小锁符号 为了让用户知道这到底意味着什么 我尝试添加标
  • 如何在 AdonisJS 上验证多部分文件?

    我在用Adonis js在最新版本但无法验证 已经尝试过了 request multipart file avatar types jpeg jpg png I already tried gt type image types image
  • 在 Angular 中什么时候应该使用 href 代替 routerLink?

    当我在 Angular 中开发并创建视图时 我总是使用 routerLink 从一个视图导航到另一个视图 最近我看到用 Angular 制作的重要页面使用 href 而不是 routerLink 来路由网站上的视图 我的问题是 什么时候在