node.js - 谷歌风格的分页

Question

我正在尝试实现 google STLye 分页，这将允许我选择第 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);
}
}

下面是组件的 View

<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 页面上找到分页组件的代码。 pagination我一直在几个项目中使用这个分页组件，它达到了目的。我希望它有帮助。