如何在Angular14中结合JSON Server实现动态菜单路由

你的菜单数据包含两种跳转类型：内部Angular路由（routerLink字段）和外部链接（url字段），当前模板统一用href="#"无法实现对应跳转，按以下步骤修改即可解决：

1. 修改Header组件模板 #

通过*ngIf区分两种链接类型，内部路由使用Angular的routerLink指令，外部链接绑定href属性，同时优化激活状态的动态设置：

<li class="nav-item" *ngFor="let menuItem of user" routerLinkActive="active">
  <!-- 内部Angular路由跳转 -->
  <a class="nav-link" *ngIf="menuItem.routerLink" [routerLink]="[menuItem.routerLink]">
    {{ menuItem.displayName }}
  </a>
  <!-- 外部链接跳转 -->
  <a class="nav-link" *ngIf="menuItem.url" [href]="menuItem.url" target="_blank">
    {{ menuItem.displayName }}
  </a>
</li>

2. 确认路由配置正确性 #

确保become-angular-tailer路由已在app-routing.module.ts中配置，示例如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { YourTargetComponent } from './path/to/your-target.component'; // 替换为你的目标组件

const routes: Routes = [
  { path: 'become-angular-tailer', component: YourTargetComponent },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

关键说明 #

• 使用[routerLink]动态绑定路由值，实现Angular单页应用的无刷新跳转
• 外部链接添加target="_blank"可在新窗口打开（根据需求可选）
• routerLinkActive指令会自动给当前激活的菜单项添加active类，替换原来固定的active属性，实现激活状态的动态切换

内容的提问来源于stack exchange，提问作者Shweta Joshi