@jinyuantang/my-pages v0.0.1

使用方法：

1.在使用的项目中安装 npm i @jinyuantang/my-pages

2.在需要使用该npm包的模块中引入npm包模块

imports:MyPagesModule

3.在组件中使用即可

@指令都为必填项

<lib-my-pages buttonTemplate="btn" total="total" size="size" currentValue="currentValue" (currentContent)="contentList($event)">

总数量 total number类型

@Input() 方法

toatl 是指子组件传给父组件的值, "total" 是指父组件接受子组件的值;

当前页码的数据量 size number类型

@Input() 方法

size 是指子组件传给父组件的值, "size" 是指父组件接受子组件的值;

当前值 currentValue number类型

@Input() 方法

currentValue 是指子组件传给父组件的值, "currentValue" 是指父组件接受子组件的值;

自定结构指令的属性名 buttonTemplate TemplateRef类型

@Input() 方法

buttonTemplate 是指子组件传给父组件的值, "btn" 是指父组件接受子组件的值;

例：子组件定义：

ngTemplateOutlet 是指令

<ng-container *ngTemplateOutlet="buttonTemplate">

引用组件 并接受组件传过来的值

<QS-paginate buttonTemplate="btn">

在ng-template 使用名为#btn接受组件传过来的值

<ng-template #bth> ...

currentContent

@Output() 方法 参数$event 必填

(currentContent) output的方法的属性名 "contentList($event)" 接受output的方法

自定义分页功能

<ng-template #btn let-item="Sitem"> <ng-container ngSwitch="item.pos"> <ng-container ngSwitchCase="'top'"> <span (click)="Home(item.page)">首页 <ng-container ngSwitchCase="'prev'"> <span (click)="Top(item.page)">上一页 <ng-container ngSwitchCase="'middle'"> <span class="page" class.active="currentValue == item.page" (click)="OnShow(item.page)">{{item.page}} <ng-container ngSwitchCase="'next'"> <span (click)="Next(item.page)">下一页   <ng-container *ngSwitchCase="'end'"> <span (click)="End(item.page)">尾页

点击事件 (OnShow 获取当前值) (Home 首页的当前值) (Top 上一页的值) (Next 下一页的值) (End 尾页的值) (contentList 接受之组件弹射过来的值) 参数必填 都为number类型

public OnShow(i: number,) { this.currentValue = i } public Home(h: number) { this.currentValue = h } public Top(t: number) { this.currentValue = t } public Next(n: number) { this.currentValue = n } public End(e: number) { this.currentValue = e } public contentList(page:number){ this.total = 100 }

分页组件的功能

pages.component.html 文件：

如果没有设置自定义的分页就使用默认的，如果设置了自定义的分页就使用自定义

ngif="!buttonTemplate"
ngif="buttonTemplate"

pages.component.ts 文件下：

显示的页码量 number[]类型

public pageList: number[] = [];

追加的数据 {},{}...类型

public DataList: { pos: string; page: number; }[] = [];

最大页码 number类型

public maxPage: number = 0;

@Input @Output 装饰器

自定义分页 buttonTemplate为属性名 TemplateRef类型

@Input() buttonTemplate!: TemplateRef<{ pos: string, page: number }>;

当前值 number类型

@Input() currentValue: number = 0;

当前页码的数据量 number类型 必填项

@Input() size: number = 0;

总数量 number类型 必填项

@Input() total: number = 0;

弹射器

@Output() currentContent = new EventEmitter()

点击事件 onClick事件

参数page必填 size必填 都为number类型

public onClick(page: number,size:number) { this.currentValue = page this.setTotal(this.total)
this.pages(page) }