我正在尝试在我的 Angular 7 应用程序中使用带有 href 的锚标记。当我单击链接时，浏览器中的网址会发生变化，但页面不会导航到。如果我输入 target="_self" 就可以了，这样就可以了
<a href="/abcd" target="_self">Abcd</a>
但这不起作用，只有浏览器中的网址发生变化，但什么也没有发生
<a href="/abcd">Abcd</a>
就像我使用 Angular 路由并使用 RouterLink 一样，它可以工作。
<a routerLink="/abcd" routerLinkActive="active">Abcd</a>
任何人都可以解释一下这种行为吗？
Href是Html提供的基本属性，用于浏览页面，单击时重新加载页面。
routerLink是Angular提供的属性，用于导航到不同的组件而无需重新加载页面。
两者之间的主要区别在于href 会杀死当前页面的状态，而 routerLink 不会丢失页面的状态。
例如。如果页面中存在输入文本框，则 routerLink 将在导航后保留其值。routerLink 可以被视为 Angular 中 href 的自定义属性，通过覆盖一些功能（例如页面重新加载）
使用href导航：
href 是浏览器提供的默认属性，用于在页面之间导航（切换），整个页面将重新加载，失去当前状态。而黑客是通过阻止默认行为来实现的。
例如：
内部模板：
<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 内部的资源，并且在浏览器中加载的页面永远不会完全重新加载（因此应用程序状态得以维持。）这种情况的线索是浏览器的加载指示器：
当点击传统链接时，您会在浏览器中看到旋转器正在运行（在选项卡上，或者在大多数情况下在地址栏上）。当您等待 Angular 组件加载时，该旋转器将处于空闲状态。
当我的状态重置时，我总是在开发时检查这一点。有时问题是我使用了 href 而不是 routerLink。
href 告诉浏览器将 链接作为新打开，这样应用程序将被重新加载，并且仍然链接到为其配置的确切页面。
基于doc，routerLink 无需使用内部 API 重新加载即可导航应用程序。
您可以单击使用我用来解决刷新问题的一个解决方法是检查所有“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 refresh -> activates angular router
- maintains the page state
href:
- if href is used instead of routerLink - it will work but page will refresh/reload
- href kills the state of the current page