当我在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
用于外部链接,将其与a
标签一起使用,将routerLink
用于路由。您不能将href
与其他任何标签一起使用,只能将a
标签与其他标签一起使用。
[routerLink
是href
标记的属性,a
是Angular装饰器。
当我们在角度中使用href时,应用程序将失去其状态,并且整个应用程序将被重新加载。但是当我们使用routerlink时,应用程序的状态保持不变例如。假设您的角度项目中有两个页面/组件分别命名为Second和Third。
routerLink
在上面的示例中,如果您在输入字段中键入内容并使用href导航进行导航,则该状态将丢失。但是,当您使用routerlink导航进行导航时,将获得该输入文本。
让我们看看屏幕后面发生了什么:-
<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的默认操作,您将看到该页面不会重新加载routerlink中发生的事情,这仅意味着routerlink也将href用于导航,但阻止其默认行为。