import { Component } from '@angular/core'; import {Router, RouterLink, RouterOutlet} from "@angular/router"; import { NzContentComponent, NzFooterComponent, NzHeaderComponent, NzLayoutComponent, NzSiderComponent } from "ng-zorro-antd/layout"; import {NzBreadCrumbComponent, NzBreadCrumbItemComponent} from "ng-zorro-antd/breadcrumb"; import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid"; import {NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu"; import {menuData} from "../../../data/menu/menu.namespace"; import {NgClass, NgForOf} from "@angular/common"; import {animate, state, style, transition, trigger} from "@angular/animations"; import {NzIconDirective} from "ng-zorro-antd/icon"; import {NzTabComponent, NzTabSetComponent} from "ng-zorro-antd/tabs"; import {TabComponent} from "../tab/tab.component"; import {BrowserStorageService} from "../../../utils/localStorage.service"; import {DATA} from "../../../data/login/localStorage.namespace"; @Component({ selector: 'app-index', standalone: true, imports: [ RouterOutlet, NzLayoutComponent, NzHeaderComponent, NzBreadCrumbComponent, NzBreadCrumbItemComponent, NzContentComponent, NzFooterComponent, NzRowDirective, NzColDirective, NzMenuItemComponent, NzMenuDirective, RouterLink, NzSubMenuComponent, NgForOf, NgClass, NzIconDirective, NzTabComponent, NzTabSetComponent, TabComponent, NzSiderComponent ], templateUrl: './index.component.html', styleUrl: './index.component.less', animations: [ // animation triggers go here trigger('openClose', [ state('open', style({ width: '280px', backgroundColor: 'white' })), state('closed', style({ overflow: 'hidden', width: '0', })), transition('open => closed', [ animate('0.1s') ]), transition('closed => open', [ animate('0.1s') ]), ]), ] }) export class IndexComponent { // 菜单数据 menuData: any = [{ 'menuName' : '首页', 'selected' : true, }]; // 左侧菜单栏数据 leftMenuData: any = []; // 侧边菜单展示开关 isCollapse = false; constructor(private storage: BrowserStorageService) { this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']); } clickMenu(menu: object) { } // 选择操作 isSelected(item: any) { this.menuData.map((data: any) => { data.selected = data.menuName === item.menuName; }); this.leftMenuData = item['childMenuList']; if (item['menuName'] === '首页') { this.isCollapse = false; } else { this.isCollapse = true; } } }