Angular的导航栏无法加载页面
我的Angular应用里有一个导航栏，但点击不同的导航项时，页面不会重新加载以切换到导航栏中的其他内容。
我觉得问题出在 routerLink= 这部分。
我不确定，但把它替换成 href= 时就能正常工作。
但这并不理想，因为我仍然希望页面不需要重新加载。
Navbar.html
<nav class="navbar">
<div class="logo">JDC</div>
<ul class="nav-links">
<li><a routerLink="" routerLinkActive="active">Home</a></li>
<li><a routerLink="/about" routerLinkActive="active">About</a></li>
<li><a routerLink="/projects" routerLinkActive="active">Projects</a></li>
<li><a routerLink="/contact" routerLinkActive="active">Contact</a></li>
</ul>
</nav>
app.ts
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Navbar } from './navbar/navbar'
@Component({
selector: 'app-root',
imports: [RouterOutlet, RouterLink, Navbar],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected readonly title = signal('portfolio-website');
}
编辑：
这是Github仓库的链接：https://github.com/jclifton44/angularWebsite
解决方案
请确保你在index.html中已经配置了base-href。
<head>
<meta charset="utf-8" />
<title>Catbee Monaco Editor</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
请验证你已经在 bootstrapApplication 的providers数组中提供了 provideRouter(routes)。
import { provideRouter } from '@angular/router';
export const routes = [
// routes here!
]
bootstrapApplication(AppComponent, {
providers: [
...
provideRouter(routes),
...
],
}).catch((err) => console.error(err));
确保你已经在导航组件的imports数组中导入了 RouterLink 和 RouterLinkActive。
@Component({
selector: 'app-navbar',
imports: [RouterOutlet, RouterLink], // imports are mandatory!
templateUrl: './nav.html',
styleUrl: './nav.css'
})
export class Navbar {
}
最后，请确保在app.html的底部添加了 router-outlet。
<!-- app content here! -->
<router-outlet/>
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。
相关文章
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。