这很容易。假设我们在ListComponent中有一个方法,它可以更改页面并保留所有其他参数不变(例如与搜索相关的参数-不能更改页面并忘记我们正在搜索某些内容:):
page (page) {
this.list.page = page;
this._router.navigate([this.list.route, _.assign(this._params.params, { page: page })]);
this.update();
}
我使用Underscore将页面参数分配给来自私有注入的RouteParams对象的现有参数映射。该映射在导航时更新,所以一切都很好,只需记住您不能直接更改它,因为它是不可变的。
这是我的文章列表实现,以及用作指令提供分页的分页组件:
ArticleListComponent:
@Component({
selector: 'articles',
templateUrl: './article/list/index.html',
directives: [PaginationComponent],
providers: [ArticleService]
})
export class ArticleListComponent implements OnInit {
list: ArticleList = new ArticleList;
private _urlSearchParams: URLSearchParams = new URLSearchParams;
constructor (
private _article: ArticleService,
private _router: Router,
private _params: RouteParams,
private _observable: ObservableUtilities
) {}
update () {
this._observable.subscribe(this._article.retrieveRange(this.list));
}
ngOnInit () {
let page = this._params.get("page");
if(page) {
this.list.page = Number(page);
}
let title = this._params.get("title");
if (title) {
this.list.title = title;
}
this.update();
}
size (size: number) {
}
page (page) {
this.list.page = page;
this._router.navigate([this.list.route, _.assign(this._params.params, { page: page })]);
this.update();
}
search () {
this.list.page = 1;
let params = _.pick({
title: this.list.title
}, _.identity);
this._router.navigate([this.list.route, params ]);
}
}
分页组件:
import { Component, Input, Output, EventEmitter, OnInit } from 'angular2/core';
import { RouteParams } from 'angular2/router';
import _ from 'underscore';
import { List } from '../common/abstract';
@Component({
selector: 'pagination',
templateUrl: './pagination/index.html'
})
export class PaginationComponent implements OnInit {
@Input() list: List;
@Output() change = new EventEmitter<number>();
pages: Array<number> = [];
constructor(
private _params: RouteParams
) {}
ngOnInit () {
this.pages = _.range(1, this.list.pages + 1);
}
onClick (page: number) {
if (page > 0 && page <= this.list.pages) {
this.change.emit(page);
}
return false;
}
href (page: number) {
return `${this.list.uri}?${_.map(_.assign(this._params.params, { page: page }), (value, param) => `${param}=${value}`).join('&')}`;
}
first (page) {
return page == 1 ? 1 : null;
}
last(page) {
return page == this.list.pages ? this.list.pages : null;
}
}
分页模板(index.html)- 我使用Bootstrap进行样式设计
<div>
<ul class="pagination">
<li [class.disabled]="first(list.page)"><a (click)="onClick(list.page - 1)" [attr.href]="href(list.page - 1)">«</a></li>
<template ngFor let-page [ngForOf]="pages">
<li *ngIf="(page >= list.page - 2 && page <= list.page + 2) || first(page) || last(page)" [ngSwitch]="(page != list.page - 2 && page != list.page + 2) || first(page) || last(page)" [class.active]="page == list.page">
<a *ngSwitchWhen="true" (click)="onClick(page)" [attr.href]="href(page)">{{page}}</a>
<a *ngSwitchDefault (click)="onClick(page)" [attr.href]="href(page)">...</a>
</li>
</template>
<li [class.disabled]="last(list.page)"><a (click)="onClick(list.page + 1)" [attr.href]="href(list.page + 1)">»</a></li>
</ul>
</div>
在文章列表模板中的使用方法:
...
<pagination *ngIf="list.pages > 1" [(list)]="list" (change)="page($event)" class="text-center"></pagination>
...
在我的小项目中,文章服务使用 Range header 从服务器请求一系列文章。
希望您会觉得这很有帮助!