# tss-platform

**Repository Path**: shore1ot/tss-platform

## Basic Information

- **Project Name**: tss-platform
- **Description**: 基于 Angular 和 ng-zorro-antd 的菜单组件
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-06-22
- **Last Updated**: 2022-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Angular, platform

## README

# TssPlatform

基于 Angular 和 ng-zorro-antd 的菜单组件
并添加配套路由复用策略

## 依赖

- Angular: 8.2.5
- ng-zorro-antd: 8.5.2

## 使用方式

按照如下步骤进行:

### 安装依赖

`npm install tss-platform`

### 在模块中引入菜单模块

以 `app.module.ts` 为例

```
import { TssPlatformModule } from 'tss-platform';

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
  ],
  imports: [
    ...
    TssPlatformModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### 使用菜单组件


```
import { Component } from '@angular/core';
import { Menu } from 'tss-platform';

@Component({
    selector: 'app-layout',
    template: `
        <tss-platform
                [ntMenus]="menus"
                [ntExtra]="extra"
                [ntAvatar]="avatar"
                [ntTitle]="'项目名称'"
                [ntLogo]="!collapse? 'assets/logo-full.png': 'assets/logo.png'"
                (onCollapse)="onCollapse($event)"
            >
                <ng-template #extra>
                    <!-- 菜单右上角操作块 -->
                </ng-template>

                <ng-template #avatar>
                    <!-- 菜单左侧头像块 -->
                </ng-template>
            </tss-platform>
    `,
})
export class LayoutComponent {

    menus: Menu[] = [
        {
            title: '一级菜单',
            url: '/link',
            icon: 'read',
            auth: 'authority',   // 权限点
            children: [
                {
                    title: '二级菜单-列表',
                    url: '/link/list',
                    hidden: true,   // 隐藏页面
                },
                {
                    title: '二级菜单-编辑',
                    url: '/link/edit',
                }
            ]
        }
    ];

    collapse = false;

    onCollapse($event: boolean): void {
        this.collapse = $event;
    }
}
```

```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {
}
```

### 路由配置

```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'link',
        pathMatch: 'full'
      },
      {
        path: 'link',
        loadChildren: () => import('./xxxx.module').then((m) => m.XxxxxModule)
      },
    ]
  },
  {
    // 登录模块可跳出菜单
    path: 'passport',
    loadChildren: () => import('./passport.module').then((m) => m.PassportModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```

### 权限注入

`MenuService.setAuth(['xxxx']);`

### 页面中使用面包屑

```
<tss-header></tss-header>
```

## 路由复用策略

需要缓存的页面菜单配置 `reuse: true` ，就可以在切换其它页面时缓存页面快照，再次返回该页面则还原上次页面信息，当点击菜单切换页面时清空页面复用缓存。并添加 `_onReuseInit` 和 `_onReuseDestroy` 钩子，只在路由复用页面进出时触发。具体使用方式如下:

### app.module.ts

```
import { ReuseTabService, ReuseTabStrategy } from 'tss-platform';

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
  ],
  imports: [
    ...
  ],
  providers: [
    ...
    {
      provide: RouteReuseStrategy,
      useClass: ReuseTabStrategy,
      deps: [ReuseTabService],
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### share.mudule.ts

```
import { ReuseTabModule } from 'tss-platform';
```

### 在需要复用的菜单中添加 reuse 参数

```
...
{
  title: '用户列表',
  url: '/user/edit',
  reuse: true,
},
```

注意: 点击菜单将自动清除所有复用缓存