Question

我有一个页面显示表中的所有记录，它在底部有分页。我认为分页应该是一个独立的组件，因为它将在许多管理面板中重用.Ex：UserManagement，PostManagement，..

我不知道该怎么做，因为分页只能起作用，因为它必须准确知道特定表中有多少记录。例如：在UserManagement中，我使用UserService来计算所有记录并获取要在表用户中显示的限制记录。在PostManagement中，我必须做同样的事情。

这是我现在的代码： users.component.ts（显示列表用户）

export class UsersComponent implements OnInit {
  private users: User[];
  private pagination: Pagination;
  private limit: number;
  private currentPage: number;
  private limits:number[] = _.range(10,110,10);

  constructor(
    private userService: UsersService,
  ) { }

  ngOnInit() {
    this.limit = 10;
    this.currentPage = 1;
    this.pagination = new Pagination(1, this.currentPage, this.limit);
    this.changePage(this.currentPage);
  }

  changePage(page: number) {
    if (page < 1 || page > this.pagination.totalPages) {
      return;
    }
    this.currentPage = page;
    this.userService.getUsers(this.limit * (this.currentPage - 1), this.limit).subscribe(res => {
        this.users = res.rows as User[];
        this.pagination = new Pagination(res.count, this.currentPage, this.limit);
      });
  }
}

users.component.html

<div class="row">
          <div class="col-sm-12">
            <table class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid">
              <thead>
                <tr role="row">
                  <th class="sorting_desc" tabindex="0" rowspan="1" colspan="1">Id</th>
                  <th class="sorting" tabindex="0" rowspan="1" colspan="1">Account</th>
                  <th class="sorting" tabindex="0" rowspan="1" colspan="1">Password</th>
                  <th tabindex="0" rowspan="1" colspan="1">Status</th>
                  <th tabindex="0" rowspan="1" colspan="3">Action</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let user of users;let index=index;let isOdd=odd;let isEven=even" class="gradeA" [class.odd]="isOdd" [class.even]="isEven"
                  role="row">
                  <td>{{user.id}}</td>
                  <td>{{user.username}}</td>
                  <td>{{user.password}}</td>
                  <td>{{user.status}}</td>
                  <td>action</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="dataTables-info" id="dataTables-example_info">Information</div>
          </div>
          <div class="col-sm-6">
            <div class="dataTables_paginate paging_simple_numbers" id="dataTables-example_paginate" *ngIf="pagination.displayPages && pagination.displayPages.length">
              <ul class="pagination">
                <li class="paginate_button first" [ngClass]="{disabled:pagination.currentPage === 1}">
                  <a (click)="changePage(1)">First</a>
                </li>
                <li class="paginate_button previous" [ngClass]="{disabled:pagination.currentPage === 1}">
                  <a (click)="changePage(pagination.currentPage - 1 )">Previous</a>
                </li>
                <li class="paginate_button previous" *ngFor="let page of pagination.displayPages" [ngClass]="{active:pagination.currentPage === page}">
                  <a (click)="changePage(page)">{{page}}</a>
                </li>
                <li class="paginate_button next" [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
                  <a (click)="changePage(pagination.currentPage + 1 )">Next</a>
                </li>
                <li class="paginate_button last" [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
                  <a (click)="changePage(pagination.totalPages )">Last</a>
                </li>
              </ul>
            </div>
          </div>
        </div>

pagination.ts

export class Pagination {
    totalElements: number;
    totalPages: number;
    currentPage: number;
    limit: number;
    startPage: number;
    endPage: number;
    startIndex: number;
    endIndex: number;
    displayPages: number[];

    constructor(totalElements: number, currentPage: number = 1, limit: number = 10) {
        this.totalElements = totalElements;
        this.limit = limit;
        this.currentPage = currentPage;
        this.totalPages = Math.ceil(totalElements / limit);
        this.startPage = 1;
        this.endPage = this.totalPages;
        if (this.totalPages > 10) {
            if (currentPage <= 6) {
                this.endPage = 10;
            } else if (currentPage + 4 >= this.totalPages) {
                this.startPage = this.totalPages - 9;
            } else {
                this.startPage = currentPage - 5;
                this.endPage = currentPage + 4;
            }

        }
        this.startIndex = (currentPage - 1) * limit;
        this.endIndex = Math.min(this.startIndex + limit - 1, totalElements - 1);
        this.displayPages = _.range(this.startPage, this.endPage + 1);
    }
}

Answer 1

将分页移动到单独的组件中并将其包含在user.component

中

<app-pagination></app-pagination>

然后使用装饰器@Input将参数传递给父组件。

<app-pagination [totalElements]="totalElements 
                [totalPages]="totalPages"></app-pagination>

在pagination.component.ts

中

@Input() totalElements;

然后，如果你想从分页组件中更改父级的值 - 使用装饰器@Output（）

<app-pagination [totalElements]="totalElements 
                [totalPages]="totalPages"
                (event)="methodFromUserComponent()"></app-pagination>

在官方网站https://angular.io/guide/component-interaction

上阅读更多内容

这里的文章非常好：https://www.themarketingtechnologist.co/building-nested-components-in-angular-2/

在Angular 2中共享组件

1 个答案: