锚href与有角度的路由器链接 [英] anchor href vs angular routerlink

问题描述

我试图在我的Angular 7应用程序中使用带有href的定位标记.当我单击链接时，URL在浏览器中更改，但是页面无法导航到.如果我将target ="_ self"放进去，它将起作用

I am trying to use anchor tag with href in my Angular 7 app. When I click on the link the url changes in the browser but the page doesn't get navigated to. It works if I put target="_self" so this works

<a href="/abcd" target="_self">Abcd</a>

但是这不仅不能在浏览器中更改网址，而且什么也没发生

but this does not work only the url changes in the browser but nothing happens

<a href="/abcd">Abcd</a>

就像我使用Angular路由并使用RouterLink一样.

where as if I use Angular routing and use RouterLink it works.

<a routerLink="/abcd" routerLinkActive="active">Abcd</a>

任何人都可以解释这种行为.

Can anyone explain the behaviour please.

推荐答案

使用href导航:

href是浏览器提供的用于在页面之间进行导航(切换)的默认属性，在该属性中，整个页面将被重新加载，而不会丢失当前状态.

href is the default attribute provided by browsers for navigating (switching) between pages, where the entire page will be get re-loaded losing the current state.

黑客是通过阻止默认行为来实现的.

whereas the hack is by preventing the default behavior.

例如:

内部模板:

 <a href="route" (click)=onClick($event) />

内部组件:

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

在href中使用target属性:

Using the target attribute in href:

Please refer to https://www.w3schools.com/tags/att_link_target.asp

使用routerLink进行导航:

Angular模仿routerLink指令内的上述行为

Angular mimics the above behaviour inside routerLink directive

这篇关于锚href与有角度的路由器链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！