Angular中routerLink显示为普通文本无法点击，求排查问题

你的问题核心是独立组件模式下，NavbarComponent未导入RouterModule——routerLink是RouterModule提供的专属指令，组件没导入该模块时，Angular无法识别这个属性，自然会把<a>标签当成普通文本处理。

具体修复步骤 #

1. 打开navbar.component.ts文件
2. 从@angular/router导入RouterModule
3. 在组件的imports数组中添加RouterModule

修改后的navbar.component.ts示例：

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router'; // 新增导入

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [RouterModule], // 添加RouterModule到导入列表
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.css'
})
export class NavbarComponent {}

额外检查点 #

确保你的项目入口文件（比如main.ts）已经正确配置路由提供者，示例如下：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)] // 必须配置这行启用路由
});

完成以上修改后，routerLink就能正常识别，链接会恢复可点击状态并触发路由跳转。

内容的提问来源于stack exchange，提问作者Lara 1998