airport-chengdu-web/src/app/pages/pages.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import { map, filter, mergeMap } from 'rxjs/operators';
import { pipe } from 'rxjs'
// import 'rxjs/add/operator/map';
// import 'rxjs/add/operator/mergeMap';

@Component({
    selector: 'app-pages',
    templateUrl: './pages.component.html',
    styleUrls: ['./pages.component.scss']
})
export class PagesComponent implements OnInit {

    menuData = [
        {
            "name": "航班动态",
            "icon": 'fa-plane',
            "isExpend": false,
            "isActive": true,
            "path": "/app/main"
        },
        {
            "name": "季度计划",
            "icon": 'fa-cube',
            "isExpend": false,
            "isActive": false,
            "path": "/app/season"
        },
        {
            "name": "历史数据",
            "icon": 'fa-history',
            "isExpend": false,
            "isActive": false,
            "path": "/app/history"
        },
        {
            "name": "基础数据",
            "icon": 'fa-database',
            "isExpend": false,
            "children":[
                {
                    "name": "值机岛",
                    "icon": "fa-eercast",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/checkingroup"
                },
                {
                    "name": "登机门",
                    "icon": "fa-h-square",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/gate"
                },
                {
                    "name": "航站楼",
                    "icon": "fa-wpexplorer",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/terminal"
                },
                {
                    "name": "行李传送带",
                    "icon": "fa-ils",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/chut"
                },
                {
                    "name": "行李转盘",
                    "icon": "fa-connectdevelop",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/carousel"
                },
                {
                    "name": "机位",
                    "icon": "fa-exchange",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/stand"
                },
                {
                    "name": "值机柜台",
                    "icon": "fa-desktop",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/checkindesk"
                },
                {
                    "name": "机场",
                    "icon": "fa-fighter-jet",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/airport"
                },
                {
                    "name": "城市",
                    "icon": "fa-globe",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/city"
                },
                {
                    "name": "机型",
                    "icon": "fa-file-text-o",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/aircrafttype"
                },
                {
                    "name": "飞机",
                    "icon": "fa-plane",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/aircraft"
                },
                {
                    "name": "航站楼区域",
                    "icon": "fa-area-chart",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/terminalarea"
                },
                {
                    "name": "航空公司",
                    "icon": "fa-building-o",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/basic/airline"
                },
            ]
        },
        {
            "name": "系统管理",
            "icon": "fa-window-restore",
            "isExpend": false,
            "children": [
                {
                    "name": "个人设置",
                    "icon": "fa-cog",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/system/settings"
                },
                {
                    "name": "角色管理",
                    "icon": "fa-users",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/system/roles"
                },
                {
                    "name": "用户管理",
                    "icon": "fa-user",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/system/users"
                },
                {
                    "name": "部门管理",
                    "icon": "fa-street-view",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/system/departments"
                },
                {
                    "name": "操作日志",
                    "icon": "fa-sticky-note",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/system/logs"
                },
                {
                    "name": "数据同步",
                    "icon": "fa-refresh",
                    "isExpend": false,
                    "isActive": false,
                    "path": "/app/system/synchronization"
                },
            ]
        }]
    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute
    ) { }

    ngOnInit() {
        let activeRoute = this.router.url;
        this.selectActiveMenu(this.menuData,activeRoute);

        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd),
        ).subscribe((event) => {
            this.selectActiveMenu(this.menuData,event['urlAfterRedirects'])
        });

    }

    /**
     * 判断是否有子节点
     * @param item 
     */
    isLeaf(item: any) {
        return !item.children || !item.children.length;
    }

    selectActiveMenu(menuData,activeRoute) {
        menuData.forEach(item => {
            if (this.isLeaf(item)) {
                if (item.path === activeRoute) {
                    item.isActive = true;
                } else {
                    item.isActive = false;
                }
            }else{
                this.selectActiveMenu(item.children,activeRoute)
            }
        })
    }

}