添加菜单页路由

src/app/pages/pages.component.ts

@@ -1,4 +1,10 @@
 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',
@@ -12,23 +18,29 @@ export class PagesComponent implements OnInit {
             "name": "航班动态",
             "icon": 'fa-plane',
             "isExpend": false,
-            "path": "/main"
+            "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,
+            "isActive": false,
+            "path": "/app/basic"
         },
         {
             "name": "系统管理",
@@ -38,32 +50,96 @@ export class PagesComponent implements OnInit {
                 {
                     "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() { }
+    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),
+            // map(() => this.activatedRoute),
+            // map(route => {
+            //     console.log(route)
+            //     while (route.firstChild) route = route.firstChild;
+            //     console.log('-----')
+            //     return route;
+            // }),
+            // filter(route => route.outlet === 'primary'),
+            // mergeMap(route => route.data)
+
+        ).subscribe((event) => {
+            // console.log(event['urlAfterRedirects'])
+            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{
+                // item.isExpend = !item.isExpend;
+                this.selectActiveMenu(item.children,activeRoute)
+            }
+        })
     }
 
 }