我只是想自己学习一些 Angular。我了解到您必须使用 routerLink 指令才能让 Angular 在不刷新页面的情况下更改路由。但是，我有一些奇怪的行为。在下面的代码中，您可以看到我以相同的方式构建了所有导航链接。但是，环绕在我的徽标（底部）周围的主路由总是会在我单击它时导致页面刷新。可能是因为图像？
<nav>
<div id="container">
<ul class="{{ menuIsVisible ? 'visible' : null }}">
<ng-template ngFor let-i="index" let-route [ngForOf]="routes">
<ng-template [ngIf]="i !== placeLogo" [ngIfElse]="withLogo">
<li>
<a
class="{{ active === route.path ? 'active' : null }} {{
hovered === route.path ? 'hovered' : null
}}"
(click)="handleClick($event)"
(mouseover)="handleHover($event)"
(mouseleave)="resetHover()"
[routerLink]="route.path"
>{{ route.path === "" ? "home" : route.path }}</a
>
</li>
</ng-template>
<ng-template #withLogo>
<li>
<a
class="{{ active === route.path ? 'active' : null }} {{
hovered === route.path ? 'hovered' : null
}}"
(click)="handleClick($event)"
(mouseover)="handleHover($event)"
(mouseleave)="resetHover()"
[routerLink]="route.path"
>{{ route.path === "" ? "Home" : route.path }}</a
>
</li>
<li>
<a class="logo" [routerLink]="''" (click)="handleClick($event)"
><img
src="assets/images/logo-white.svg"
(click)="$event.stopPropagation()"
alt="logo"
/></a>
</li>
</ng-template>
</ng-template>
</ul>
</div>
</nav>
这些是我的路线
export const routes: Routes = [
{ path: "", component: HomePageComponent },
{ path: "skills", component: SkillsComponent },
{ path: "experience", component: ExperienceComponent },
{ path: "contact", component: ContactComponent }
];