首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Google样式分页

Google样式分页
EN

Stack Overflow用户
提问于 2019-04-08 06:22:47
回答 1查看 461关注 0票数 1

我正在尝试实现google stlye分页,这将允许我选择页面1,2,3等等。任何帮助都是最好的。

你可以在下面看到我的.ts文件和.html文件。

代码语言:javascript
复制
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;



}

代码语言:javascript
复制
<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 -->

Web服务

代码语言:javascript
复制
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);
    }
    )
}

}

EN

回答 1

Stack Overflow用户

发布于 2019-04-08 08:21:58

创建可重用的分页组件,如下所示。

代码语言:javascript
复制
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);
}
}

下面是组件的视图

代码语言:javascript
复制
<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应该能够接受页码并相应地返回数据:

代码语言:javascript
复制
 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我已经在几个项目中使用过这个分页组件,它就是为了这个目的。我希望它能帮上忙。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55564200

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档