markdown JHipster - 增加分页

Posted 2021-05-06

## route.ts
Add the following class to file
``` ts
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot, Routes} from '@angular/router';
//...
import {JhiPaginationUtil} from 'ng-jhipster';
import {Injectable} from '@angular/core';

@Injectable()
export class EntityPagingParams implements Resolve<any> {
    constructor(private paginationUtil: JhiPaginationUtil) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const page = route.queryParams['page'] ? route.queryParams['page'] : '1';
        const sort = route.queryParams['sort'] ? route.queryParams['sort'] : 'id,asc';
        return {
            page: this.paginationUtil.parsePage(page),
            predicate: this.paginationUtil.parsePredicate(sort),
            ascending: this.paginationUtil.parseAscending(sort)
        };
    }
}
```
Edit the `Routes` `const` to the following
``` ts
 export const entityRoute: Routes = [
     {
         path: 'entity',
         component: PesquisaQuestaoDiscRespostaComponent,
\!h        resolve: {
\!h            'pagingParams': EntityPagingParams
\!h        },
```
## Module.ts
Import and add `PagingParams` to `Providers`
``` ts
    providers: [
        PesquisaQuestaoDiscRespostaService,
        PesquisaQuestaoDiscRespostaPopupService,
\!h        EntityPagingParams
    ],

```
## Component.ts
``` ts
\\ Import `ActivatedRoute` and `Router`
import {ActivatedRoute, Router} from '@angular/router';
\\ Add variable 'routeData' and 'previous page'
export class PesquisaQuestaoDiscRespostaComponent implements OnInit, OnDestroy {

    entities: Entity[];
    //...
    totalItems: number;
\!h    routeData: any;
\!h    previousPage: any;

  constructor(
        private pesquisaQuestaoDiscRespostaService: PesquisaQuestaoDiscRespostaService,
        private jhiAlertService: JhiAlertService,
        private eventManager: JhiEventManager,
        private parseLinks: JhiParseLinks,
        private principal: Principal,
\!h        private activatedRoute: ActivatedRoute,
\!h        private router: Router,
    )
```
In `constructor` body, replace the following code:
``` ts
      constructor(
        //...) 
      {
        this.pesquisaQuestaoDiscRespostas = [];
        this.itemsPerPage = ITEMS_PER_PAGE;

\!h        this.page = 0;
\!h        this.links = {
\!h            last: 0
\!h        };
\!h        this.predicate = 'id';
\!h        this.reverse = true;
      }
```
by
``` ts
        this.routeData = this.activatedRoute.data.subscribe((data) => {
            this.page = data['pagingParams'].page;
            this.previousPage = data['pagingParams'].page;
            this.reverse = data['pagingParams'].ascending;
            this.predicate = data['pagingParams'].predicate;
        });

```
Edit `ngOnInit`
``` ts
    ngOnInit() {
        this.principal.identity().then((account) => {
            this.currentAccount = account;
            this.transition();
            this.registerChangeInEntities();
        });
    }
```
Edit `ngOnDestroy`
``` ts
    ngOnDestroy() {
\!h        this.routeData.unsubscribe();
        this.eventManager.destroy(this.eventSubscriber);
    }

```

Edit `loadAll`
``` ts
     loadAll() {
         this.pesquisaQuestaoDiscRespostaService.query({
\!h           page: this.page - 1,
             size: this.itemsPerPage,
             sort: this.sort()
         }).subscribe(

```
Edit `loadPage`
``` ts
    loadPage(page: number) {
        if (page !== this.previousPage) {
            this.previousPage = page;
            this.transition();
        }
    }

```
Edit `transition`
``` ts
    transition() {
        this.router.navigate(['/entity'], {
            queryParams: {
                page: this.page,
                sort: this.predicate + ',' + (this.reverse ? 'asc' : 'desc')
            }
         });
        this.loadAll();
     }
```
Edit `registerChangeInEntities`
``` ts
     registerChangeInEntities() {
// remove        this.eventSubscriber = this.eventManager.subscribe('entityModification', (response) => this.reset());
\!h        this.eventSubscriber =
\!h            this.eventManager.subscribe(
\!h                'entityModification', (response) => this.loadAll());
     }
```
Edit `onSuccess`
``` ts
     private onSuccess(data, headers) {
         this.links = this.parseLinks.parse(headers.get('link'));
         this.totalItems = headers.get('X-Total-Count');
\!h        this.queryCount = this.totalItems;
\!h        this.entities = data;
        // for (let i = 0; i < data.length; i++) {
        //     this.pesquisaQuestaoDiscRespostas.push(data[i]);
        // }
     }

```


## Component.hml
Add after `</table></div>`
``` html
    <!-- Pagination -->
    <div *ngIf="totalItems">
        <div class="row justify-content-center">
            <jhi-item-count [page]="page" [total]="queryCount"
                            [itemsPerPage]="itemsPerPage"></jhi-item-count>
        </div>
        <div class="row justify-content-center">
            <ngb-pagination [collectionSize]="totalItems"
                            [(page)]="page" [pageSize]="itemsPerPage"
                            [maxSize]="5" [rotate]="true"
                            [boundaryLinks]="true"
                            (pageChange)="loadPage(page)"></ngb-pagination>
        </div>
    </div>
```

If comming from **Infinity Scroll**, switch the line
``` html
<tbody infinite-scroll (scrolled)="loadPage(page + 1)" [infiniteScrollDisabled]="page >= links['last']" [infiniteScrollDistance]="0">

```
by `<tbody>`