关于分页组件的改进

最新推荐文章于 2024-10-17 14:00:32 发布

Alice Ling

最新推荐文章于 2024-10-17 14:00:32 发布

阅读量275

点赞数 6

文章标签： java 算法前端服务器 javascript

本文链接：https://blog.csdn.net/weixin_36373381/article/details/135956909

版权

前言

上周完成了分页组件，但是有一个问题，就是分页的size(也就是每页大小)是不统一的。这也就代表着每个列表可以有不同的size，现在是没有影响的，因为只有几个组件。但是如果有100个组件，我就要改100次。这显然不是我们想要的，下面记录我改进的过程。

过程

我们原本的size是在各个列表组件规定的，列表组件调用分页组件并传入size。我们想要统一size，使得所有列表组件都使用一个size。我首先想到了在分页组件里规定好size的值，然后传入size。
原来size是分页组件传入的值，我们把他变为传出。
一开始不会传出对象。我就写了两个传出进行分别传出。

@Output() selected = new EventEmitter<number>();

@Output() selected1 = new EventEmitter<number>();
  
 
onPage(page: number) {
    if (page < 0 || page >= this.totalPages) {
      return ;
    }
    this.selected.emit(page);
    this.selected1.emit(this.size);
    this.loadData();
  }

但是后来想到了size和page都是number类型，那我就传出一个数组，具体参考了Array<>的用法，发现Array<>是一个栈的结构，如果往里放入，就是用push()方法，拿出就是用pop()方法，当然这个先进后出的。
写完后发现了一个问题，就是我们的size是传出的，而触发这个传出方法是由点击某个页数触发的，这也就意味着我们第一次点进去列表是无法触发传出size的目的，我们的第一次还是依据着列表组件的初始size，我们只有点一次才能恢复正常。

@Output() selected = new EventEmitter<Array<number>>();

params = new Array<number>();
 
onPage(page: number) {
    if (page < 0 || page >= this.totalPages) {
      return ;
    }
    this.params.push(page);
    this.params.push(this.size);
    this.selected.emit(this.params);
    this.loadData();
  }

列表组件接收

onPageSelected(pages: Array<number>) {
    this.params.size = pages.pop();
    this.params.page = pages.pop();
    this.loadData();
  }

如何模拟点一次的动作呢，我机智的想到了把onpage()里的方法放到了@input totalPages里，也就是说我们第一次传入totoalPages时就会传出size。

@Input() set setTotalPages(totalPages: number) {
    this.totalPages = totalPages;
    this.pages = this.makePagesByTotalPages(this.page, totalPages);
    this.params.push(0);
    this.params.push(this.size);
    this.selected.emit(this.params);
  }

自以为完美的完成了任务。经过老师的指导，子组件不应该去规定父组件的变量，并且我写的当@input的时候@output，会造成访问两次，这也是我们不希望的。
正确的写法应该是在一个任意一个组件里写一个size，然后其他组件调用这个size就可以了，我们把size设置成静态变量，他就会在一个组件改变，在另一个组件生效了。
在某个分页组件里设置静态变量。

/*在此设置每页大小*/
  public static size1 = 10;

在列表组件里赋值

import {PageComponent} from '../../core/page/page.component';

export class IndexComponent implements OnInit {

  /*查询参数*/
  params = {
    page: 0,
    size: PageComponent.size1,
    username: new FormControl(),
    email: new FormControl()
  };
}

其实我这种写法是不规范的，应该把size变量写到m层里。