Angular 12中routerLink不生效 导航项变为只读问题求助

你遇到的routerLink失效问题由以下几个配置错误导致：

• 路由模块未正确导出路由指令
  你虽然在AppModule中导入了RouterModule和AppRoutingModule，但如果AppRoutingModule没有对外导出RouterModule，声明在AppModule下的NavbarComponent无法识别routerLink、routerLinkActive这些Angular路由专属指令，这部分属性会被当作普通自定义属性处理，所以a标签会失去跳转能力变成普通文本。
  另外你在AppModule的imports中额外导入了无配置的裸RouterModule，属于多余配置，也可能造成路由能力冲突。
• routerLink用法错误
  1. 代码中存在routerLink="#"的写法，#是原生href的锚点语法，不能直接赋值给routerLink，指向根路径请改为routerLink="/"
  2. 部分使用routerLink的a标签添加了target="_blank"属性，routerLink默认走客户端无刷新路由，搭配target="_blank"时会直接失效，需要新开页面的路由请自行封装跳转逻辑，不要直接加target属性。
• 组件重复声明
  AppModule的declarations数组中重复声明了两次userRegisterComponent，该运行时异常也可能间接影响路由功能的正常执行。

修复步骤 #

1. 修正AppRoutingModule配置
   确认AppRoutingModule中已经配置了login、user-register、hero等路径和对应组件的映射关系，且在exports数组中明确导出RouterModule，参考配置如下：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { userRegisterComponent } from './pages/userregister/userRegister.component';
// 引入你的其他路由对应组件

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'user-register', component: userRegisterComponent },
  // 其他路由配置
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule] // 必须配置该项，否则其他组件无法使用路由指令
})
export class AppRoutingModule { }

2. 清理AppModule多余配置
   删除AppModule imports数组中额外引入的RouterModule，删除declarations数组中重复的userRegisterComponent声明。
3. 修正模板中routerLink的错误用法
   将<a routerLink="#" class="navbar-brand">改为<a routerLink="/" class="navbar-brand">，去掉不需要新开页面的路由元素上的target="_blank"属性。

内容的提问来源于stack exchange，提问作者Vintage Farms