Angular Navbar 点击后无法切换页面，如何排查 routerLink 问题？

先检查 Navbar 组件自己的 imports。如果导航栏是独立组件，就需要在 Navbar 中导入 RouterLink 和 RouterLinkActive。只把它们加到父组件 App 的 imports 中，导航栏模板仍然无法使用这些指令。

给出的 app.ts 还使用了 RouterLink，但缺少对应的 TypeScript import。如果实际文件也是这样，编译时会报错。

补充的仓库链接无法读取，暂时不能确定具体原因。可以先按独立组件的配置逐项排查。

1. 在 Navbar 中导入路由指令

独立组件通过自己的 imports 声明模板依赖。导航链接写在 navbar.html 中，就应在对应的 navbar.ts 中导入指令。Angular 官方导航示例也是这样配置的。

// navbar.ts
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './navbar.html',
  styleUrl: './navbar.css'
})
export class Navbar {}

这两处导入各有作用：

• TypeScript 的 import 让文件可以引用 RouterLink、RouterLinkActive。
• @Component 的 imports 让组件模板可以使用这些指令。

缺少指令导入时，静态的 routerLink="/about" 可能只被当作普通 HTML 属性，点击后不会触发 Angular 导航；使用 [routerLink] 时，通常会报未知属性的模板错误。

2. 保留 routerLink，并明确首页路径

routerLink="/about" 是合法写法，固定路径不必改成数组绑定。写成 [routerLink]="['/about']" 也可以，但这无法解决缺少指令导入的问题。

导航栏可以这样写：

<nav class="navbar">
  <div class="logo">JDC</div>

  <ul class="nav-links">
    <li>
      <a
        routerLink="/"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
      >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>

routerLink="" 没有语法错误，但它按当前激活路由解析，不能在所有路由层级都用来返回首页。routerLink="/" 则明确从应用路由的根路径导航。具体解析规则见 RouterLink API。

首页链接上的 exact: true 可以避免访问其他路径时 Home 仍显示激活样式。RouterLinkActive 负责添加 CSS 类，不负责切换页面内容，详见 RouterLinkActive API。

3. 确认页面有 router-outlet

路由匹配成功后，Angular 通过 <router-outlet> 显示目标组件。只在 TypeScript 中导入 RouterOutlet，模板中并不会自动出现路由出口。Angular 路由出口说明

如果 App 模板只使用导航栏和路由出口，可以这样配置：

// app.ts
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Navbar } from './navbar/navbar';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, Navbar],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('portfolio-website');
}

<!-- app.html -->
<app-navbar></app-navbar>

<main>
  <router-outlet></router-outlet>
</main>

其中，app-navbar 必须与 Navbar 实际声明的 selector 一致。

需要随路由切换的页面内容，应通过路由加载。如果把 <app-home> 等页面组件直接写在路由出口之外，它们会一直显示，看起来就像导航后内容没有变化。

4. 检查路由表与启动配置

示例中的组件名称和导入路径需要替换为项目实际使用的页面组件：

// app.routes.ts
import { Routes } from '@angular/router';
import { Home } from './home/home';
import { About } from './about/about';
import { Projects } from './projects/projects';
import { Contact } from './contact/contact';

export const routes: Routes = [
  { path: '', component: Home },
  { path: 'about', component: About },
  { path: 'projects', component: Projects },
  { path: 'contact', component: Contact }
];

路由表中的 path 应写成 'about'，不要带开头的斜杠；导航链接可以使用 routerLink="/about"。

独立应用还需要注册路由：

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

启动应用时也要使用这份配置：

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig)
  .catch(error => console.error(error));

如果已有 appConfig，保留其中的其他配置，只补上缺少的路由注册，避免重复调用 provideRouter。Angular 路由配置说明

路由顺序也需要检查：** 通配路由应放在最后。如果首页通过空路径重定向，通常需要设置 pathMatch: 'full'，避免匹配到其他地址。

5. 根据点击后的现象继续定位

先查看终端编译信息和浏览器控制台，再点击 About，观察地址栏和页面内容的变化：

如果仍无法定位，可以临时在已有的 provideRouter(routes) 中加入 withDebugTracing()，查看 NavigationEnd、NavigationCancel 或 NavigationError 等事件，确认导航在哪一步结束。调试完成后移除该选项。Angular 路由调试说明

注意事项

如果项目使用 NgModule，需要检查声明 Navbar 的模块是否导入了 RouterModule，并在根路由模块中通过 RouterModule.forRoot(routes) 注册路由。上面的独立组件配置不能直接套用。

把 routerLink 换成 href 后能打开页面，只能说明浏览器可以请求该地址，不能证明 Angular 的指令、路由表和路由出口已配置正确。使用 routerLink 进行普通站内导航时，页面应更新 URL 并切换路由组件，无需重新加载整个文档。

备注：内容仅供参考。