ngx-ty-nx-menu1 v1.0.77-beta.3

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 { MenuModule } from 'ngx-ty-menu';

• 组件引用

<app-menu 
    [data]="menuList"
    [appName]="loginName"
    (menuFoldStatus)="menuFoldStatus($event)">
</app-menu>

• 自定义下方配置实例

<app-menu 
  [data]="menuList"
  [optionsContent]="optionsContent"
  [appName]="loginName"
  (menuFoldStatus)="menuFoldStatus($event)">
  <ng-template #optionsContent>
    <ul>
      <li>自定义</li>
    </ul>
  </ng-template>
</app-menu>

• 组件data数据请求menu接口

  this._http.post('menus?c=' + new Date().getTime(), {}, this.ctx_auto).subscribe(data => {
    if (data && data.status === 200) {
      this.menuList = data.data;
    }
  });

• 组件data数据格式

data = [
    {
      id: 1,              // 菜单id 【必填】
      title: '测试1',     // 菜单标题 【必填】
      enable: true,      // 菜单权限【非必填，不传该字段默认为false】true：该项菜单正常可点击；false:该项菜单禁用。
      children: [        // 菜单子集 【非必填】
        {
          id: 2,
          title: '测试二级',
          children: [
            {
              id: 3,
              title: '测试三级',
              link: '/test1'
            },
          ]
        }
      ]
    }, {
        id: 4,
        title: '测试2',
        enable: false,
        link: '/test2'  // 菜单当前路由 【最后一级必填 否则点击无效】
    },
]

• 组件api：