ngx-xs-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：

参数	说明	类型	默认值
[menuList]	【必填】菜单数据数组	any[]	-
[theme]	【非必填，当前仅支持白色版】主题颜色	白色版：'light' 黑色版：'black'	light
[searchList]	【非必填】搜索框下拉列表数组
[searchKey]	【非必填】搜索输入框下拉列表值
[placeholder]	【非必填】搜索输入框placeholder
[searchValue]	【非必填】搜索输入框值
[uerList]	【必填】点击用户下拉菜单选项
[userName]	【必填】用户名
[language]	【非必填】国际化参数	中文：'zh' 英文：'en'	zh
[optionsContent]	【非必填】自定义配置项	TemplateRef	我的消息、language、帮助文档、主题、退出
(searchKeyChange)	搜索框下拉菜单改变事件	EventEmitter<string>
(searchValueChange)	搜索框输入值改变世界	EventEmitter<string>
(languageChange)	下方默认配置中<Language>点击change事件	EventEmitter<string> 中文：'zh' 英文：'en'	默认为[language]传入值
(themeChange)	下方默认配置中<主题>换肤change事件	EventEmitter<string> 白色版：'light' 黑色版：'black'	默认为[theme]传入值
(logout)	下方默认配置中<退出>点击事件	EventEmitter<boolean>
(searchApi)	统一搜索事件	EventEmitter
[listOfData]	表格数据	[]	[]
[total]	后端分页数据总条数	Number	0
-