Wie kann ich eine pagination-Komponente in der Winkel 4?

Können Sie einfach erstellen Sie Ihre eigenen Paginierung Komponente.

Wenn Sie Winkel-CLI in Ihrem Projekt können Sie erstellen, die neue Komponente in Ihrem app-Ordner mit ng g c pagination. Wenn Sie nicht Angualr CLI-dann Ordner erstellen Seitenumbruch und folgende Dateien:

• Paginierung.ts //für Modell/interface
• Paginierung.Komponente.ts //für Logik
• pagination.component.html //tempalte
• Paginierung.Komponente.css //Stile

Paginierung.ts

export class Page {
    page: number;
    itemsPerPage: number;
}

Paginierung.Komponente.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Page } from './pagination';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {

  @Input() maxPages: number;
  @Input() current: number;
  @Input() postsPerPage: number[];
  @Input() itemsPerPage: number;

  @Output() changePage = new EventEmitter();

  pages: any[] = [];
  pageModel: Page = {
    page: this.current,
    itemsPerPage: this.itemsPerPage
  };

  constructor() { }

  ngOnInit() {
    if (this.maxPages) {
      this.createPages();
    }
  }

  setPage(page: number, perPage: number) {
    this.pageModel.page = page;
    this.pageModel.itemsPerPage = perPage;
    this.changePage.emit(this.pageModel);
  }

  createPages() {
    for(let i=1; i <= this.maxPages; i++) {
      this.pages.push(i);
    }
  }

}

pagination.component.html

In meinem Projekt benutze ich bootstrap, aber Sie können einfach passen Sie diese Vorlage für Sie Wünsche.

<div class="row">
  <div class="col-lg-6">
    <nav aria-label="Pagination" *ngIf="maxPages > 1">
      <ul class="pagination">
        <li [class.disabled]="current == 1">
          <a href="javascript:;"
             (click)="setPage(current-1, itemsPerPage)"
             aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li *ngFor="let page of pages;" [class.active]="page == current">
          <a href="javascript:;" (click)="setPage(page, itemsPerPage)">{{ page }}</a>
        </li>
        <li [class.disabled]="current == maxPages">
          <a href="javascript:;" (click)="setPage(current+1 ,itemsPerPage)" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="col-lg-6 text-right per-page">
    <nav aria-label="Anzahl der Beiträge pro Seite">
      <p>Anzahl der Beiträge pro Seite:</p>
      <ul class="pagination">
        <li *ngFor="let perPage of postsPerPage;" [class.active]="perPage == itemsPerPage">
          <a href="javascript:;" (click)="setPage(current, perPage)">{{ perPage }}</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Paginierung.Komponente.css

Hier einige Stile.

.per-page nav p {
    display: inline-block;
    margin: 25px 10px;
    font-weight: bold;
    padding: 2px 0;
}

.per-page nav .pagination {
    float: right;
}

Haben Sie nach dem erstellen dieser Dateien haben, sollten Sie zum importieren dieser Komponente in Ihrem app.module.ts.

Hier ist ein Beispiel für die Verwendung dieses Paginierung mit API-wie Ihr Endpunkt:

students-list.component.html

Setzen pagination-Komponente, um Ihre Vorlage und bekommen emittiert evet. Auch sollten Sie, um Daten zu senden, um pagination-Komponente über den Eingang.

<app-pagination [maxPages]="maxPages"
                [current]="currentPage"
                [postsPerPage]="postsPerPage"
                [itemsPerPage]="itemsPerPage"
                (changePage)="pageChanged($event)"></app-pagination>

In Ihrem students-list.component.ts definieren Sie einige default-Werte, und Sie können die Arbeit mit ausgelöste Ereignisse.

Studenten-Liste.Komponente.ts

itemsPerPage: number = 25;
postsPerPage: number[] = [25, 50, 100];

constructor(private studentService: StudentService) {}

pageChanged(event) {
    this.page = event.page;
    this.itemsPerPage = event.itemsPerPage
    this.loadStudentsByPage(this.page, this.itemsPerPage);
}

loadStudentsByPage(page: number, rows: number) {
    let params = new URLSearchParams(); 
    params.set('page', page.toString());
    params.set('rows', rows.toString());
    this.isLoading = true;
    this.studentService.getStudentListByParams(params).subscribe(data => {
      this.students= data;
      this.isLoading = false;
    }, error => {
      this.isLoading = false;
      console.log(error);
    });
}

Studenten-Liste.service.ts

Und hier ist ein Beispiel-of-service-Funktion, um Studenten aus der API:

headers = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'});

getStudentListByParams(params: URLSearchParams): Observable<StudentsModel> {
    const endpoint = domain + '/list/students';
    return this.http
      .get(endpoint, { search: params, headers: this.headers })
      .map((res: Response) => res.json())
      .catch((e) => this.handleError(e));
}

Ich hoffe, Sie können dieses Beispiel verwenden und es ist leicht zu verstehen.

InformationsquelleAutor Gregor Doroschenko