import { Component } from '@angular/core'; import {RouterLink, RouterOutlet} from "@angular/router"; import {NzContentComponent, NzFooterComponent, NzHeaderComponent, NzLayoutComponent} 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"; @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 ], 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 { // 首次导航数据 firstMenuData = menuData; // 侧边菜单展示开关 isCollapse = false; tabs = ['首页' , '商户管理']; constructor( ) {} // 选择操作 isSelected(item: any) { this.isCollapse = true; this.firstMenuData.map(data => { data.selected = data.title === item.title; }); } }