Angular17单个组件实现无限层级菜单遍历 ng-zorro antd

// service/MenuService.ts
import {Menu} from "../components/layout/layout.types";

@Injectable({
  providedIn: 'root',
})
export class MenuService {
  // 菜单数据 这里写死数据只作演示
  public data: Menu[] = [
    {
      id: 1,
      title: "菜单管理",
      href: "/admin"
    },
    {
      id: 2,
      title: "子菜单",
      children: [
        {
          id: 3,
          title: "还是菜单管理",
          children: [
            {
              id: 4,
              title: "子子菜单",
              href: "/admin/menu"
            }
          ]
        }
      ]
    }
  ]
  
 }

// left-nav/left-nav.component.ts
import {Component, Input} from '@angular/core';
import { CommonModule } from '@angular/common';
import {Menu} from "../layout/layout.types";
import {NzMenuModule} from "ng-zorro-antd/menu";
import {RouterLink} from "@angular/router";
import {MenuService} from "../../shared/service/menu.service";

@Component({
  selector: 'app-left-nav',
  standalone: true,
  imports: [CommonModule, NzMenuModule, RouterLink],
  templateUrl: './left-nav.component.html',
  styleUrls: ['./left-nav.component.scss'],
})
export class LeftNavComponent {
  @Input() menus: Menu[] = []
  @Input() deep: number = 0

  constructor(
    public menuService: MenuService
  ) {
  }
}

<!--left-nav/left-nav.component.html-->
@if (deep === 0) {
  <app-left-nav [deep]="deep + 1" [menus]="menuService.data"></app-left-nav>
} @else {
  @for (menu of menus; track menu.id) {
    @if (menu.children?.length) {
      <li nz-submenu [nzTitle]="menu.title">
        <ul>
          <app-left-nav [menus]="menu.children!" [deep]="deep + 1"></app-left-nav>
        </ul>
      </li>
    } @else {
      <li nz-menu-item>
        @if (menu.href) {
          <a [routerLink]="menu.href">{{menu.title}}{{menu.href}}</a>
        } @else {
          {{menu.title}}
        }
      </li>
    }
  }
}