Angular中的href和routerLink之间的任何区别或相似之处答案

【问题标题】：Any difference or similarity between href and routerLink in AngularAngular中的href和routerLink之间的任何区别或相似之处
【发布时间】：2017-11-07 00:16:10
【问题描述】：

这是我的 navbar.html

<ul class="white">
      <li><a href="/signup">Signup</a></li>
      <li><a href="/challange">Create Challange</a></li>
      <li><a href="/feed">News Feed</a></li>
    </ul>

这是我的 app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

即使我在 localhost 中运行此代码，单击每个菜单链接也会感觉加载整个页面。但是，我看到许多 Angular 项目页面没有完全加载，只是更改了那个 url。

我的问题，这个问题来自href？我应该使用roouterLink 来解决这个问题吗？

【问题讨论】：

如果您使用的是 Angular 内置路由器，则应该始终使用 routerLink，因为它是最佳实践，我相信幕后有很多好处
你能详细说明一下
抱歉，我在手机上打字，有点困难。但是一个示例是在 routerLink 中，您可以通过执行 '../' 或 '../../' 轻松导航到父组件或在路由中上升 2 级，而这在 href 中是无法做到的。
感谢您的回复！我试过它工作正常。之前它正在加载整个页面，现在它正在工作
值得注意的是，有时它实际上会在出现错误时重新加载整个页面。因为应用程序有时会重新加载它可以清除控制台输出，所以可能值得勾选让您保持控制台输出的框

标签： html angular

【解决方案1】：

routerLink：

是angular2+中的指令
导航到 New Url，组件在 routeroutlet 的位置呈现，无需重新加载页面

href:

它是标签的一个属性
html 锚标签属性导航到另一个页面并重新加载整个应用程序

【讨论】：

【解决方案2】：

在 Angular 中，您可以定义不同的 states，然后路由到/渲染这些状态（使用 ui-sref 与简单的 html 中的 href 相比）而无需重新加载页面。只有 url 得到更改。阅读更多关于ui-routerhere和here的信息

查看fiddle 获取演示代码

【讨论】：

不，这不是 angular4。这是 angularjs 1
是的，它是有角度的。那又怎样？
概念是一样的
不同之处在于 routerLink 你可以传递 I 路由参数对象，如果你使用 ngFor 会非常有用