黄兵的个人博客

Metronic Angular 7.1.2 asideMenu解析

最近在写后台管理系统，前端使用的是Angular，完全使用Angular自己编写一个管理框架十分麻烦，而且自己能力有限，估计架构没做好，最后会成为一个牵一发而动全身垃圾架构。

所以还是使用Metronic左右一个现成的成品，我顺便也可以学习以下别人的架构模式，在大型系统中如何设计Angular。

这里首先是登录之后，左边的菜单一直不知道需要在哪里修改，经过一番寻找之后，在这个位置修改左边菜单（aside）：src/app/pages/_layout/layout.component.html

这里使用的是动态菜单，通多后端读取，所以修改成了如下内容：

<ng-container *ngIf="asideSelfDisplay">
  <!--begin::DYNAMIC Aside-->
  <app-aside-dynamic #ktAside id="kt_aside" class="aside aside-left d-flex flex-column flex-row-auto" [ngClass]="asideCSSClasses"></app-aside-dynamic>
  <!--end::DYNAMIC Aside-->
</ng-container>
<!-- end:: Aside Left -->

删除相关静态菜单内容，精简无用代码，之后修改src/app/pages/layout.module.ts文件，删除AsideComponent的引用。

查看src/app/pages/_layout/components/aside-dynamic/aside-dynamic.component.ts文件，可以看到：

// menu load
const menuSubscr = this.menu.menuConfig$.subscribe(res => {
  this.menuConfig = res;
  this.cdr.detectChanges();
});
this.subscriptions.push(menuSubscr);

这里使用的是DynamicAsideMenuService的服务，文件路径：src/app/_metronic/core/services/dynamic-aside-menu.service.ts，通过加载DynamicAsideMenuConfig相关配置，之后aside-dynamic.component.ts通过初始化BehaviorSubject的方式订阅aside的菜单内容。

可以看到DynamicAsideMenuService服务整个代码很整洁，代码如下：

export class DynamicAsideMenuService {
  private menuConfigSubject = new BehaviorSubject<any>(emptyMenuConfig);
  menuConfig$: Observable<any>;
  constructor() {
    this.menuConfig$ = this.menuConfigSubject.asObservable();
    this.loadMenu();
  }

  // Here you able to load your menu from server/data-base/localStorage
  // Default => from DynamicAsideMenuConfig
  private loadMenu() {
    this.setMenu(DynamicAsideMenuConfig);
  }

  private setMenu(menuConfig) {
    this.menuConfigSubject.next(menuConfig);
  }

  private getMenu(): any {
    return this.menuConfigSubject.value;
  }
}

如果修改动态菜单，直接重写loadMenu()，从后端读取就可以了。

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - Metronic Angular 7.1.2 asideMenu解析