[完善]菜单选中的显示

src/app/pages/home/home.component.html

@@ -7,39 +7,25 @@
       <img src="../../../assets/images/logo2.png" alt="">
     </div>
     <div class="libox" *ngIf="!isGasStationNav">
-      <li [routerLink]="['/homepage']" routerLinkActive="router-link-active">
+      <li *ngFor="let item of menu1" (click)="routerChange(item)"
-        首页
+        [ngClass]="{'router-link-active': item.name == selectedItem}">
-      </li>
+        {{item.name}}
-      <li [routerLink]="['/plan']" routerLinkActive="router-link-active">
-        数字油站
-      </li>
-      <li [routerLink]="['/todaywarning']" routerLinkActive="router-link-active">
-        今日预警
-      </li>
-      <li [routerLink]="['/records_nav']" routerLinkActive="router-link-active">
-        预警记录
-      </li>
-      <li [routerLink]="['/audit']" routerLinkActive="router-link-active">
-        证照管理
       </li>
     </div>
     <div class="libox" *ngIf="isGasStationNav">
-      <li [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
-        数字油站
-      </li>
-      <li *ngIf="!isGasStationBack" [routerLink]="['/todaywarning/petrolStation']"
-        routerLinkActive="router-link-active">
-        今日预警
-      </li>
-      <li *ngIf="!isGasStationBack" [routerLink]="['/records_nav/petrolStation']" routerLinkActive="router-link-active">
-        预警记录
-      </li>
-      <li *ngIf="!isGasStationBack" [routerLink]="['/license/petrolStation']" routerLinkActive="router-link-active">
-        证照管理
-      </li>
-    </div>
-
 
+      <ng-container *ngIf="isGasStationBack; else elseTemplate">
+        <li [routerLink]="['/plan/petrolStation']" routerLinkActive="router-link-active">
+          数字油站
+        </li>
+      </ng-container>
+      <ng-template #elseTemplate>
+        <li *ngFor="let item of menu2" (click)="routerChange(item)"
+          [ngClass]="{'router-link-active': item.name == selectedItem}">
+          {{item.name}}
+        </li>
+      </ng-template>
+    </div>
 
     <!-- 登录信息按钮 -->
     <div class="boxright">

src/app/pages/home/home.component.ts

@@ -16,6 +16,7 @@ declare var abp: any
 import * as moment from 'moment';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DisposeequipmentComponent } from '../records/warning-statistics-list/disposeequipment/disposeequipment.component';
+import { SelectedMenu } from 'src/app/service/selectedMenu.service';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
@@ -25,7 +26,7 @@ export class HomeComponent implements OnInit {
   @ViewChild('warning', { static: false }) template?: TemplateRef<{}>;
   passwordValidateForm!: FormGroup;
   constructor(private listRefreshService: listRefreshService, private http: HttpClient, private router: Router, private navChangeService: NavChangeService, public token: CacheTokenService,
-    private message: NzMessageService, private notificationService: NzNotificationService, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private fb: FormBuilder) {
+    private message: NzMessageService, private notificationService: NzNotificationService, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private fb: FormBuilder, private selectedMenu: SelectedMenu) {
     const { password } = MyValidators;
     this.passwordValidateForm = this.fb.group({
       oldpassword: [null, [Validators.required]],
@@ -41,7 +42,41 @@ export class HomeComponent implements OnInit {
 
   surname: string
   userName: string
+
+
+  //菜单
+  menu1 = [
+    { name: '首页', url: '/homepage' },
+    { name: '数字油站', url: '/plan' },
+    { name: '今日预警', url: '/todaywarning' },
+    { name: '预警记录', url: '/records_nav' },
+    { name: '证照管理', url: '/audit' },
+  ]
+  menu2 = [
+    { name: '数字油站', url: '/plan/petrolStation' },
+    { name: '今日预警', url: '/todaywarning/petrolStation' },
+    { name: '预警记录', url: '/records_nav/petrolStation' },
+    { name: '证照管理', url: '/license/petrolStation' },
+  ]
+
+  selectedItem
+  routerChange(item) {
+    if (item.name == this.selectedItem) {
+      return
+    }
+    sessionStorage.setItem('selectedMenu', item.name)
+    this.selectedItem = item.name
+    this.router.navigate([item.url])
+  }
+
+
+  selectedMenuObj
   ngOnInit(): void {
+
+    if (sessionStorage.getItem('selectedMenu')) {
+      this.selectedItem = sessionStorage.getItem('selectedMenu')
+    }
+
     this.isGasStation = JSON.parse(sessionStorage.getItem('isGasStation'))
     //初始化登陆 如果是油站用户
     if (this.isGasStation) {
@@ -95,7 +130,11 @@ export class HomeComponent implements OnInit {
 
   }
 
-
+  ngAfterViewInit() {
+    SignalRAspNetCoreHelper.initSignalR();
+    abp.event.on('abp.notifications.received', this.reloadPage);
+    this.selectedMenuObj.unsubscribe()
+  }
   //初次登陆修改密码弹窗
   isVisible = false
   isConfirmLoading = false
@@ -146,10 +185,6 @@ export class HomeComponent implements OnInit {
     this.receiptOfNotification(userNotification)
   };
 
-  ngAfterViewInit() {
-    SignalRAspNetCoreHelper.initSignalR();
-    abp.event.on('abp.notifications.received', this.reloadPage);
-  }
 
   //右下角消息弹窗
   messageId = []
@@ -469,13 +504,4 @@ export class HomeComponent implements OnInit {
     modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
   }
 
-
-  selectedMenu
-  routerChange(url, name) {
-    if (this.selectedMenu == name) {
-      return
-    }
-    this.selectedMenu = name
-    this.router.navigate([url])
-  }
 }

src/app/pages/login/login.component.ts

@@ -7,6 +7,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
 import { Base64 } from 'js-base64';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { SelectedMenu } from 'src/app/service/selectedMenu.service';
 
 declare var abp: any
 @Component({
@@ -19,7 +20,7 @@ export class LoginComponent implements OnInit {
 
   validateForm!: FormGroup;
   passwordValidateForm!: FormGroup;
-  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, private fb: FormBuilder, private message: NzMessageService, private notificationService: NzNotificationService) {
+  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, private fb: FormBuilder, private message: NzMessageService, private notificationService: NzNotificationService, private selectedMenu: SelectedMenu) {
     const { password } = MyValidators;
     this.validateForm = this.fb.group({
       userName: [null, [Validators.required]],
@@ -129,12 +130,12 @@ export class LoginComponent implements OnInit {
               sessionStorage.setItem("isGasStation", 'true');
               this.router.navigate(['/todaywarning/petrolStation'])
               this.message.create('success', `登录成功`);
-
+              sessionStorage.setItem('selectedMenu', '今日预警')
             } else {
               sessionStorage.setItem("isGasStation", 'false');
               this.router.navigate(['/homepage'])
               this.message.create('success', `登录成功`);
-
+              sessionStorage.setItem('selectedMenu', '首页')
             }
           }
         }, err => {
@@ -155,8 +156,6 @@ export class LoginComponent implements OnInit {
     this.message.create('warning', `请联系管理员`);
   }
 
-
-
 }
 export type MyErrorsOptions = { 'zh-cn': string; en: string } & Record<string, NzSafeAny>;
 export type MyValidationErrors = Record<string, MyErrorsOptions>;

src/app/pages/records/records-nav/records-nav.component.html

@@ -6,12 +6,6 @@
                 <div class="contentitem">
                     <span (click)="selectMenu(item)" *ngFor="let item of menuList"
                         [ngClass]="{'selectedMenu': selectedMenu == item}">{{item}}</span>
-                    <!-- <ng-container *ngIf="isEcharts; else elseTemplate">
-                        <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
-                    </ng-container>
-                    <ng-template #elseTemplate>
-                        <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packdown.png" alt="">
-                    </ng-template> -->
                 </div>
             </div>
         </div>

src/app/pages/records/records-nav/records-nav.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecordsNavComponent } from './records-nav.component';
+
+describe('RecordsNavComponent', () => {
+  let component: RecordsNavComponent;
+  let fixture: ComponentFixture<RecordsNavComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RecordsNavComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecordsNavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/records/records-nav/records-nav.component.ts

@@ -51,11 +51,4 @@ export class RecordsNavComponent implements OnInit {
     }
   }
 
-  isEchartsShow() {
-    console.log('发了吗')
-    this.isEcharts = !this.isEcharts
-    setTimeout(() => {
-      this.isShowEcharts.sendMessage(this.selectedMenu)
-    }, 0);
-  }
 }

src/app/service/selectedMenu.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SelectedMenu {
+
+    constructor() { }
+    private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
+    /** * 向其他组件发送信息 ** 
+   * @param message 需要发送的信息 *
+   * @returns {Observavle<any>} */
+
+    public sendMessage(message: any) {
+        this._sendMessage.next(message);
+    }
+
+    public getMessage(): Observable<any> {
+        return this._sendMessage.asObservable();
+    }
+}

src/app/system-management/navigation/navigation.component.ts

@@ -16,6 +16,7 @@ export class NavigationComponent implements OnInit {
     this.router.navigate(['/login'])
   }
   pages() {
+    sessionStorage.setItem('selectedMenu', '数字油站')
     this.router.navigate(['/plan'])
   }
 }