求助：基于JSON文件生成指定样式的Angular动态菜单

我已经有一个样式和功能都完整的静态菜单，现在希望通过JSON数据生成和它样式完全一致的动态菜单，但尝试了网上的示例后，要么样式匹配不上，要么修改DOM类名导致原有功能异常。

现有静态菜单的核心HTML结构： #

<div class="menu-container" > 
  <div class="menu"> 
    <nav class="navbar-toggleable-md"> 
      <div id="toggle" class="navbar-toggler"><a></a> </div> 
    </nav> 
    <ul id="my_styles" class="rowcenter" > 
      <li> 
        <a role="button" class="button button4 menu-button" >
          <i role="button" class="icon-ambientais fs1 icon menu-button"></i>
          <span class="button-text rowcenter menu-button">menu1</span>
        </a> 
        <ul class="menu-list"> 
          <li> 
            <a href="#" style="color: #f38e31">
              <i style="color: white" class="icon-ambientais fs1"></i>submenu
            </a> 
            <ul> 
              <li>
                <a href="javascript:void(0)" [routerLink]="['/doc/link']" [routerLinkActive]="['router-link-active']">submenu</a>
              </li> 
              <li>
                <a href="javascript:void(0)" [routerLink]="['/doc/link2']" [routerLinkActive]="['router-link-active']">submenu</a>
              </li> 
              <li>
                <a href="javascript:void(0)" [routerLink]="['/documentos/AbreviaturaQld']" [routerLinkActive]="['router-link-active']">{{ 'Imagens' | translate }}</a>
              </li> 
            </ul> 
          </li> 
          <li> 
            <a href="#" style="color: #f38e31">
              <i style="color: white" class="icon-gestao-ambient fs1"></i>submenu3
            </a> 
            <ul> 
              <li>
                <a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a>
              </li> 
              <li>
                <a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a>
              </li> 
              <li>
                <a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a>
              </li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
</div>

我尝试的TypeScript代码（用jQuery生成，但样式不匹配）： #

ngOnInit() { 
  this._menu.getMenu()
    .subscribe( res => { 
      let data = res; 
      console.log(data); 
      var getMenuItem = function (itemData) { 
        var item = $("<li>")
          .append( $("<a>", { href: itemData.link, html: itemData.name })); 
        if (itemData.sub) { 
          var subList = $("<ul>"); 
          $.each(itemData.sub, function () { 
            subList.append(getMenuItem(this)); 
          }); 
          item.append(subList); 
        } 
        return item; 
      }; 
      var $menu = $("#menu"); 
      $.each(data.menu, function () { 
        $menu.append( getMenuItem(this) ); 
      }); 
      $menu.menu(); 
    }); 
}

我现在需要一个能生成一级菜单和子菜单的可运行示例（不需要图标也可以），确保生成的DOM结构和静态菜单完全一致，这样样式和原有功能都不会受影响。

你遇到的问题核心是用jQuery生成的DOM结构和原有静态菜单的类名、层级没完全对应，而且Angular项目里尽量用框架原生的方式渲染，避免jQuery操作DOM导致的样式/功能冲突。下面是一个完全匹配你静态结构的可运行示例：

第一步：定义菜单数据的接口（确保类型安全） #

在你的组件里先定义菜单数据的接口，和你JSON返回的结构对齐：

export interface MenuItem {
  name: string;
  routerLink?: string[]; // Angular路由数组
  sub?: MenuItem[];
  isParent?: boolean; // 标记是否是包含子菜单的父项
}

第二步：准备模拟的JSON菜单数据（或替换为API返回数据） #

menuData: MenuItem[] = [
  {
    name: "menu1",
    isParent: true,
    sub: [
      {
        name: "submenu",
        isParent: true,
        sub: [
          { name: "submenu", routerLink: ["/doc/link"] },
          { name: "submenu", routerLink: ["/doc/link2"] },
          { name: "Imagens", routerLink: ["/documentos/AbreviaturaQld"] }
        ]
      },
      {
        name: "submenu3",
        isParent: true,
        sub: [
          { name: "submenu2", routerLink: ["/doc2/link2"] },
          { name: "submenu2", routerLink: ["/doc2/link2"] },
          { name: "submenu2", routerLink: ["/doc2/link2"] }
        ]
      }
    ]
  }
];

第三步：编写组件模板（完全复用静态菜单的DOM结构和类名） #

这里用嵌套*ngFor实现层级渲染，完全保留你原有静态菜单的所有类名和结构：

<div class="menu-container" > 
  <div class="menu"> 
    <nav class="navbar-toggleable-md"> 
      <div id="toggle" class="navbar-toggler"><a></a> </div> 
    </nav> 
    <ul id="my_styles" class="rowcenter" >
      <!-- 一级菜单 -->
      <li *ngFor="let item of menuData">
        <a role="button" class="button button4 menu-button" *ngIf="item.isParent">
          <span class="button-text rowcenter menu-button">{{ item.name }}</span>
        </a>
        <!-- 一级子菜单列表 -->
        <ul class="menu-list" *ngIf="item.sub && item.sub.length > 0">
          <li *ngFor="let subItem of item.sub">
            <a href="#" style="color: #f38e31" *ngIf="subItem.isParent">
              {{ subItem.name }}
            </a>
            <!-- 二级子菜单列表 -->
            <ul *ngIf="subItem.sub && subItem.sub.length > 0">
              <li *ngFor="let deepItem of subItem.sub">
                <a href="javascript:void(0)" 
                   [routerLink]="deepItem.routerLink" 
                   [routerLinkActive]="['router-link-active']">
                  {{ deepItem.name }}
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul> 
  </div> 
</div>

第四步：组件逻辑（从API获取数据的情况） #

如果你的菜单数据是从后端API获取的，只需要把模拟的menuData替换成API返回的数据即可：

import { Component, OnInit } from '@angular/core';
import { MenuService } from './menu.service'; // 假设你的数据服务叫MenuService

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
  menuData: MenuItem[] = [];

  constructor(private _menu: MenuService) { }

  ngOnInit(): void {
    this._menu.getMenu().subscribe(res => {
      this.menuData = res.menu; // 假设API返回结构为 { menu: MenuItem[] }
    });
  }
}

关键注意点： #

• 完全复用原有类名和DOM层级：这样你的原有CSS样式会自动生效，不需要修改任何样式文件
• 用Angular原生指令替代jQuery：避免框架外的DOM操作导致的路由、样式冲突
• 扩展性优化：如果菜单层级不固定（比如可能有3级以上），可以把子菜单部分抽成一个递归组件，适配更深的菜单结构

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