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| -|