我正在尝试在我的Angular 7应用程序中使用带有href的锚标签。 当我单击链接时，浏览器中的URL会更改，但页面不会导航到该链接。 如果我加上target="_self"就可以正常工作。
<a href="/abcd" target="_self">Abcd</a>
但这并不起作用，只有浏览器中的URL更改了，但没有任何反应。
<a href="/abcd">Abcd</a>
然而，如果我使用Angular路由并使用RouterLink，它就可以工作。
<a routerLink="/abcd" routerLinkActive="active">Abcd</a>
有人能解释一下这种行为吗？
Href是由Html提供的基本属性，用于通过点击链接导航到不同页面并在点击后重新加载页面。
routerLink是由Angular提供的属性，用于在不重新加载页面的情况下导航到不同的组件。
两者之间的主要区别在于href会清除当前页面的状态，而routerLink不会丢失页面的状态。
例如，如果页面中存在一个输入文本框，则在导航后，routerLink将保留其值。可以通过覆盖某些功能（如页面重载）来将routerLink视为href在Angular中的自定义属性。
使用 href 导航：
href 是浏览器提供的默认属性，用于在页面之间导航（切换），在此过程中整个页面将会重新加载，丢失当前状态。
而 hack 的方法是通过阻止默认行为来实现。
例如：
在模板中：
<a href="route" (click)=onClick($event) />
组件内部：
onClick(event :Event){
event.preventDefault();
}
在 href 中使用 target 属性：
Please refer to https://www.w3schools.com/tags/att_link_target.asp
使用routerLink进行导航:
Angular在routerLink指令中模拟了上述行为。
有时候你不能使用routerLink，比如说，你在一个非angular的web组件中。
我用的一种解决刷新问题的方法是检查所有的"a"标签点击事件，如果没有routerlink属性，则阻止默认行为，然后使用路由进行导航。
@HostListener('window:click', ['$event'])
onClick(e: any) {
const path = e.composedPath() as Array<any>;
const firstAnchor = path.find(p => p.tagName.toLowerCase() === 'a');
if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
const href = firstAnchor.getAttribute('href');
this.router.navigateByUrl(href);
e.preventDefault();
}
}
routerLink:
- URL changes without page reload -> activates angular router
- maintains the page state
href:
- if href is used instead of routerLink - it will work but page will reload
- href kills the state of the current page
<p routerLink='/path'>Text</p>
为了更好地理解，请阅读这篇文章 Angular 路由。
<a routerLink="/abcd" routerLinkActive="active">Abcd</a>之前，请确保你放置了<router-outlet>。从这里，我们可以知道我们正在使用路由功能。 - Dhanushka sasankahref，那么就是调用不在你的应用程序中的页面；而routerLink则相反。 - user10863293