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"
}
]
}
]
}
]
}
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
) {
}
}
@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>
}
}
}