feat.nav

menu-web/src/modules/food/mobile/nav-mobile-tabs/nav-mobile-tabs.html

@@ -1,7 +1,7 @@
 <router-outlet></router-outlet>
 <!-- Bottom Navigation -->
 <div class="bottom-nav">
-  <div [routerLink]="nav.path" class="nav-item" *ngFor="let nav of navItems" [class.active]="nav.active">
+  <div [routerLink]="nav.path" class="nav-item" *ngFor="let nav of navItems" (click)="goPath(nav)" [class.active]="nav.path == currentPath">
     <i [class]="nav.icon"></i>
     <div>{{ nav.text }}</div>
   </div>

menu-web/src/modules/food/mobile/nav-mobile-tabs/nav-mobile-tabs.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-nav-mobile-tabs',
@@ -17,4 +17,16 @@ export class NavMobileTabs {
     { path:"/menu/reserve",icon: 'fas fa-search', text: '发现' },
     { path:"/menu/mine",icon: 'fas fa-user', text: '我的', active: true }
   ];
+  currentPath:string = ""
+  goPath(nav:any){
+    this.currentPath = nav.path
+  }
+  constructor(
+    private route:ActivatedRoute
+  ){
+    this.route.params.subscribe(data=>{
+      // console.log(this.currentPath,location.pathname)
+      // this.currentPath = location.pathname
+    })
+  }
 }

menu-web/src/modules/food/mobile/page-order/page-order.html

@@ -109,27 +109,3 @@
     </div>
   </div>
 </div>
-
-<!-- Bottom Navigation -->
-<div class="bottom-nav">
-  <div class="nav-item">
-    <fa-icon [icon]="icons.faHome"></fa-icon>
-    <div>首页</div>
-  </div>
-  <div class="nav-item">
-    <fa-icon [icon]="icons.faSearch"></fa-icon>
-    <div>发现</div>
-  </div>
-  <div class="nav-item">
-    <fa-icon [icon]="icons.faBookOpen"></fa-icon>
-    <div>故事</div>
-  </div>
-  <div class="nav-item active">
-    <fa-icon [icon]="icons.faShoppingCart"></fa-icon>
-    <div>购物车</div>
-  </div>
-  <div class="nav-item">
-    <fa-icon [icon]="icons.faUser"></fa-icon>
-    <div>我的</div>
-  </div>
-</div>