添加菜单页路由

src/app/components/bar-menu/bar-menu.component.html

@@ -1,5 +1,5 @@
 <ul class="bar-menu" [hidden]="!data.isExpend"  *ngIf="!isLeaf(data)">
-        <li *ngFor="let item of data.children">
+        <li *ngFor="let item of data.children" [ngClass]="{'active':item.isActive}">
             <a  (click)="itemClicked(item);">
                 <i class="fa mr-3" [ngClass]="item.icon"></i> <span>{{item.name}}</span>   
                 <i style="margin-top:3px;width:17px" class="fa  pull-right"  [ngClass]="{'fa-angle-down': !isLeaf(item) && item.isExpend, 'fa-angle-left': !isLeaf(item) && !item.isExpend}"></i>

src/app/components/bar-menu/bar-menu.component.scss

@@ -55,4 +55,7 @@
             }
         }
     }
+    & > li.active {
+        background: rgb(47, 94, 182);
+    }
 }

src/app/components/bar-menu/bar-menu.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router'
 
 @Component({
     selector: 'app-bar-menu',
@@ -8,7 +9,9 @@ import { Component, OnInit, Input } from '@angular/core';
 export class BarMenuComponent implements OnInit {
 
     @Input() data: Array<any>;
-    constructor() { }
+    constructor(
+        private router: Router
+    ) { }
 
     ngOnInit() {
     }
@@ -28,6 +31,8 @@ export class BarMenuComponent implements OnInit {
     itemClicked(item: any) {
         if (!this.isLeaf(item)) {
             item.isExpend = !item.isExpend;
+        } else {
+            this.router.navigate([item.path])
         }
     }
 

src/app/components/sidebar-menu/sidebar-menu.component.html

@@ -1,5 +1,5 @@
 <ul class="sidebar-menu">
-    <li *ngFor="let item of data">
+    <li *ngFor="let item of data" [ngClass]="{'active':item.isActive}">
         <a (click)="itemClicked(item);">
             <i style="margin-top:3px;width:17px" class="fa  pull-right" [ngClass]="{'fa-angle-down': !isLeaf(item) && item.isExpend, 'fa-angle-left': !isLeaf(item) && !item.isExpend}"></i>
             <i class="fa mr-3" [ngClass]="item.icon"></i> <span>{{item.name}}</span>

src/app/components/sidebar-menu/sidebar-menu.component.scss

@@ -55,4 +55,7 @@
             }
         }
     }
+    &>li.active{
+        background: rgb(47, 94, 182)
+    }
 }

src/app/components/sidebar-menu/sidebar-menu.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit,Input } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { Router } from '@angular/router'
 
 @Component({
     selector: 'app-sidebar-menu',
@@ -9,7 +10,9 @@ export class SidebarMenuComponent implements OnInit {
     //输入数据
     @Input() data: Array<any>;
 
-    constructor() { }
+    constructor(
+        private router: Router
+    ) { }
 
     ngOnInit() {
 
@@ -30,6 +33,8 @@ export class SidebarMenuComponent implements OnInit {
     itemClicked(item: any) {
         if (!this.isLeaf(item)) {
             item.isExpend = !item.isExpend;
+        } else {
+            this.router.navigate([item.path])
         }
     }