You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.6 KiB
121 lines
3.6 KiB
import { Component } from '@angular/core';
|
|
import {NgForOf} from "@angular/common";
|
|
import {NzTabComponent, NzTabSetComponent} from "ng-zorro-antd/tabs";
|
|
import {ActivationEnd, Router, RouterOutlet} from "@angular/router";
|
|
import {filter} from "rxjs";
|
|
import {NzCardComponent} from "ng-zorro-antd/card";
|
|
|
|
@Component({
|
|
selector: 'app-tab',
|
|
standalone: true,
|
|
imports: [
|
|
NgForOf,
|
|
NzTabComponent,
|
|
NzTabSetComponent,
|
|
RouterOutlet,
|
|
NzCardComponent
|
|
],
|
|
templateUrl: './tab.component.html',
|
|
styleUrl: './tab.component.less'
|
|
})
|
|
export class TabComponent {
|
|
// 当前打开的Tab页
|
|
activatedMenuIndex = -1;
|
|
// 存放已打开的Tab页信息
|
|
tabs: { path: string, title: string }[] = [{ path: '/admin/index', title: '首页' }];
|
|
constructor(private router: Router) {
|
|
// 激活首页路由
|
|
this.router.navigateByUrl('/admin/index').finally();
|
|
|
|
// 监听路由事件,只订阅 ActivationEnd 事件
|
|
this.router.events.pipe(filter(e => e instanceof ActivationEnd))
|
|
.subscribe((e) => {
|
|
// 这里不强转VS Code编译通不过,有没有大佬有解决方法
|
|
const thisEvt = <ActivationEnd>e;
|
|
if (thisEvt.snapshot.routeConfig?.loadChildren) {
|
|
// 当前激活的路由
|
|
// const activatedRoutePath = thisEvt.snapshot.routeConfig?.path;
|
|
const activatedRoutePath = this.router.url;
|
|
// console.log(activatedRoutePath);
|
|
/* if (activatedRoutePath == '/admin/index') {
|
|
return;
|
|
}*/
|
|
const routeData = thisEvt.snapshot.queryParams;
|
|
let menuTitle = '新标签页';
|
|
if(routeData) {
|
|
menuTitle = routeData['title'];
|
|
}
|
|
|
|
// 该路由是否已激活,激活过则直接打开
|
|
let isExist = false;
|
|
this.tabs.every((t, i) => {
|
|
if(activatedRoutePath === t.path) {
|
|
this.activatedMenuIndex = i;
|
|
isExist = true;
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
// 指定路由不在tabs中存在(未激活或激活后关闭)
|
|
if(!isExist) {
|
|
this.activeMenu(activatedRoutePath, menuTitle);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 点击菜单激活指定路由并保存tab页签
|
|
activeMenu(menuPath: string | undefined, menuTitle: string): void {
|
|
if(!menuPath) return;
|
|
let menuIndex = -1;
|
|
this.tabs.every((t, i) => {
|
|
if(menuPath === t.path) {
|
|
menuIndex = i;
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
if(menuIndex === -1) {
|
|
this.tabs.push({path: menuPath, title: menuTitle});
|
|
menuIndex = this.tabs.length - 1;
|
|
this.activatedMenuIndex = menuIndex;
|
|
}
|
|
}
|
|
// 激活路由
|
|
activeRoute(path: string): void {
|
|
this.router.navigateByUrl(path).finally();
|
|
}
|
|
|
|
// 切换tab,激活对应路由
|
|
toggleTab(path: string): void {
|
|
this.activeRoute(path);
|
|
}
|
|
|
|
// tab页签关闭,从缓存中删除对应信息
|
|
closeTab(tabsObj: any): void {
|
|
if (1 === this.tabs.length) return;
|
|
const path = this.tabs[tabsObj['index']]['path'];
|
|
|
|
let selectedIndex = -1;
|
|
this.tabs.every((t, i) => {
|
|
if(t.path === path) {
|
|
selectedIndex = i;
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
this.tabs.splice(selectedIndex, 1);
|
|
|
|
if(selectedIndex === this.activatedMenuIndex) {
|
|
let prevIndex = this.activatedMenuIndex - 1;
|
|
this.activatedMenuIndex = prevIndex > 0 ? prevIndex : 0;
|
|
this.activeRoute(this.tabs[this.activatedMenuIndex].path);
|
|
}else if (this.activatedMenuIndex > selectedIndex) {
|
|
this.activatedMenuIndex -= 1;
|
|
}
|
|
}
|
|
|
|
}
|
|
|