当我在 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(使用前将#替换为@)