如何避免Angular中routerLink导致<a>标签异常闭合？

解决方法1：移除原生href属性 #

Angular的routerLink指令会自动处理路由跳转并生成正确的href属性，同时存在原生href可能导致渲染异常。修改代码如下：

<a class="nav-link" routerLink="/client-list">
    <i class="fas fa-fw fa-chart-area"></i>
    <span>Type de client</span>
</a>

解决方法2：检查模板语法规范 #

• 确保<a>标签内的子元素（<i>、<span>）都正确闭合，无嵌套语法错误
• 规范routerLink的写法，避免多余空格（如routerLink = "/client-list"改为routerLink="/client-list"）

解决方法3：确认路由模块配置正确 #

检查对应模块中是否已导入并配置RouterModule：

import { RouterModule, Routes } from '@angular/router';
import { ClientListComponent } from './client-list/client-list.component';

const routes: Routes = [
  { path: 'client-list', component: ClientListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // 功能模块使用RouterModule.forChild(routes)
  exports: [RouterModule]
})
export class AppRoutingModule { }

解决方法4：使用替代标签结合router.navigate #

如果以上方案无效，可以用可点击的非a标签模拟路由跳转：

<span class="nav-link" (click)="goToClientList()" style="cursor: pointer;">
    <i class="fas fa-fw fa-chart-area"></i>
    <span>Type de client</span>
</span>

在组件类中实现跳转逻辑：

import { Router } from '@angular/router';

constructor(private router: Router) { }

goToClientList(): void {
  this.router.navigate(['/client-list']);
}

内容的提问来源于stack exchange，提问作者Jean François Manatane