Нумерация страниц в стиле Google

Question

Я пытаюсь реализовать google stlye pagination, который позволит мне выбрать страницу 1, 2, 3 и так далее. В настоящее время у меня есть функциональность, которая приведет меня к следующей странице и предыдущей странице. Как видите, API вернет 5 отелей на страницу. Я новичок в angular и node, поэтому я не совсем уверен, как это сделать. Любая помощь будет великолепна.

Вы можете увидеть ниже мой файл .ts и файл .html.

import { Component } from '@angular/core';
import { WebService } from './web.service';
import { AuthService } from './auth.service';

@Component({
selector: 'hotels',
templateUrl: './hotels.component.html',
styleUrls: ['./hotels.component.css']
})
export class HotelsComponent {

constructor(private webService: WebService, private authService: AuthService) {}

    ngOnInit() {
        if (sessionStorage.start) {
            this.start = sessionStorage.start;
            } 
        this.webService.getHotels(this.start);
        }

        nextPage() {
            this.start = Number(this.start) + 5;
            sessionStorage.start = Number(this.start);
            this.webService.getHotels(this.start);
           }
           previousPage() {
            if (this.start > 0) {
            this.start = Number(this.start) - 5;
            sessionStorage.start = Number(this.start);
            this.webService.getHotels(this.start);
            }
           }

hotel_list;    
start = 0;



}

---

<div class="container"  style="margin-top:100px;">
    <div class="row">
        <div class="col-sm-12">
            <div *ngFor="let hotel of webService.hotel_list | async">
                <div class="card text-white bg-primary mb-3" 
[routerLink]="['/hotels', hotel._id]" style="cursor: pointer">
                    <div class="card-header">
                        {{ hotel.Name }}
                    </div>
                    <div class="card-body">
                        This hotel is based in
                        {{ hotel.Location }}
                    </div>
                    <div class="card-footer">
                        {{ hotel.review_count }}
                        reviews available
                    </div>
                </div>
            </div>
        </div> <!-- col -->
    </div> <!-- row -->
    <div class="row">
        <div class="col-sm-6">
            <button (click)="previousPage()">Previous</button>
        </div>
        <div class="col-sm-6 text-right">
            <button (click)="nextPage()">Next</button>
        </div>
    </div>

</div> <!-- container -->

Веб-сервис

import { Http, URLSearchParams } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';
import { Subject } from 'rxjs/Rx';

@Injectable()
export class WebService {

hotelID;

private hotels_private_list = [];
private hotelsSubject = new Subject();
hotel_list = this.hotelsSubject.asObservable();

private hotel_private_list = [];
private hotelSubject = new Subject();
hotel = this.hotelSubject.asObservable();

private reviews_private_list = [];
private reviewsSubject = new Subject();
reviews = this.reviewsSubject.asObservable();

url: string = 'http://localhost:3000/api/hotels/';
hotelsArray = [];

constructor(private http: Http) { 


}

getHotels(start) {
    return this.http.get(
        'http://localhost:3000/api/hotels?start=' + start)
        .subscribe(response => {
            this.hotels_private_list = response.json();
            this.hotelsSubject.next(this.hotels_private_list);
        })
}



getHotel(id: string) {
    return this.http.get(
        'http://localhost:3000/api/hotels/' + id)
        .subscribe(response => {
            this.hotel_private_list = [];
            this.hotel_private_list.push(response.json());
            this.hotelSubject.next(this.hotel_private_list);
            this.hotelID = id;
        })
}

getReviews(id) {
    this.http.get(
        'http://localhost:3000/api/hotels/' + id + '/reviews')
        .subscribe(
            response => {
                this.reviews_private_list = response.json();
                this.reviewsSubject.next(
                    this.reviews_private_list);

            }
        )
}

postReview(review) {
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('username', review.name);
    urlSearchParams.append('text', review.review);
    urlSearchParams.append('stars', review.stars);

    this.http.post(
    "http://localhost:3000/api/hotels/" +
    review.hotelID + "/reviews",
    urlSearchParams)
    .subscribe(
    response => {
    this.getReviews(review.hotelID);
    }
    )
}

}

Answer 1

Создайте повторно используемый компонент нумерации страниц следующим образом.

import {
Component,
Input,
Output,
EventEmitter
} from '@angular/core';
import { OnChanges } from '@angular/core';

@Component({
selector: 'pagination',
templateUrl: './pagination.component.html',
styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnChanges {
@Input('total-items') totalItems;
@Input('page-size') pageSize;
@Output('page-changed') pageChanged = new EventEmitter();
pages: any[];
currentPage = 1;
page: number;

ngOnChanges() {
    this.currentPage = 1;

    var pagesCount = Math.ceil(this.totalItems / this.pageSize);
    this.pages = [];
    for (var i = 1; i <= pagesCount; i++)
        this.pages.push(i);
}

changePage(page) {
    this.currentPage = page;
    this.pageChanged.emit(page);
}

previous() {
    if (this.currentPage == 1)
        return;

    this.currentPage--;
    this.pageChanged.emit(this.currentPage);
}

next() {
    if (this.currentPage == this.pages.length)
        return;

    this.currentPage++;
    this.pageChanged.emit(this.currentPage);
}
}

И ниже вид для компонента

<nav *ngIf="totalItems > pageSize">
<ul class="pagination pagination-sm">
    <li [class.disabled]="currentPage == 1">
        <a class="pagetag" (click)="previous()" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
    <li [class.active]="currentPage == page" *ngFor="let page of pages" (click)="changePage(page)">
        <a class="pagetag" *ngIf="page < currentPage+5 && page > currentPage-5">{{ page }}</a>
    </li>
    <li [class.disabled]="currentPage == pages.length">
        <a class="pagetag" (click)="next()" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
</ul>
</nav>

И вы можете использовать его со своей страницы, как это. В компоненте, который вы хотите использовать для нумерации страниц, передайте номер страницы вашей службе. Обратите внимание, что ваш API должен иметь возможность принимать номер страницы и соответственно возвращать данные:

 private getDataFromServise(pageNumber) {
    this.webService.getHotels(pageNumber)
        .subscribe(result => { this.result = result});
 }

 onPageChange(page) {
    this.getDataFromServise(page);
}

 <div class="text-center">
    <pagination [total-items]="total-item-count" [page-size]="PAGE_SIZE" (page- 
    changed)="onPageChange($event)"></pagination>
</div>

Вы можете найти код для компонента нумерации страниц на моей странице github. 1011 * пагинация * Я использовал этот компонент пагинации в нескольких проектах, и он служит цели. Надеюсь, это поможет.