ngx-ty-top-menu

ngx-ty-menu 左侧菜单组件使用方法：

• npm i ngx-ty-menu --save
• 在app.module.ts中添加代码：

  ...

  // add ++
  import { HttpClient, HttpClientModule } from '@angular/common/http';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

  // add ++
  export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }

  @NgModule({
    ...
    imports: [
      ...
      // add ++
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: createTranslateLoader,
          deps: [HttpClient]
        }
      }),
    ]
  })

  ...

• 引入菜单module

  import { TopMenuModule } from 'ngx-ty-top-menu';

• 组件引用

<top-menu
    [uerList]="uerList"
    [menuList]="topMenuList"
    [userName]="loginName"
    (themeChange)="themeChange($event)"
    (logout)="logout()"
    [optionsContent]="optionsContent"
    (languageChange)="changeLanguage($event)"
    [theme]="isTheme"
    (searchApi)="searchApi($event)"
    [listOfData]="listOfData"
    [total]="total"
  >
    <div class="logo">
      <div class="logo-img"></div>
    </div>
    <i class="avatar" nz-icon nzType="user" nzTheme="outline"></i>
  </top-menu>

• 自定义下方配置实例

<top-menu
   [uerList]="uerList"
  [menuList]="topMenuList">
  <!-- 下拉框自定义 -->
  <ng-template #optionsContent>
    <ul>
      <li>自定义</li>
    </ul>
  </ng-template>
  <!-- logo -->
  <div class="logo">
    <div class="logo-img"></div>
  </div>
  <!-- user图片 -->
  <i class="avatar" nz-icon nzType="user" nzTheme="outline"></i>
</top-menu>

• 组件data数据请求menu接口

  this._http.post('menus?c=' + new Date().getTime(), {}, this.ctx_auto).subscribe(data => {
    if (data && data.status === 200) {
       data.data.map(item => {
          if (item.option) {
            this.uerList.push(item);
          } else {
            this.topMenuList.push(item);
          }
        });
    }
  });

• 组件data数据格式

data = [
   {
      id: 1,
      title: '测试一级菜单1', //名称
      link: '/top-menu', // 跳转路由
      selected: true, // 是否选中
    },
]

• 组件api：