Это довольно легко. Допустим, у нас есть метод в нашем компоненте ListComponent, который изменяет страницу и сохраняет все остальные параметры без изменений (например, параметры, связанные с поиском — мы не можем изменить страницу и забыть, что мы что-то искали:):
page (page) {
this.list.page = page;
this._router.navigate([this.list.route, _.assign(this._params.params, { page: page })]);
this.update(); // Update your list of items here
}
Я использовал Underscore, чтобы назначить параметр страницы существующей карте параметров из моего частного внедренного объекта RouteParams. Эта карта обновляется при навигации, так что у нас все хорошо, просто помните, что вы не можете изменить ее напрямую, она неизменна.
Вот моя реализация списка статей вместе с компонентом нумерации страниц, используемым в качестве директивы для обеспечения нумерации страниц:
Компонент списка статей:
@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);
}
// check for size in cookie 'articles-per-page'
let title = this._params.get("title");
if (title) {
this.list.title = title;
}
this.update();
}
size (size: number) {
// set cookie 'articles-per-page'
}
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) — я использую бутстрап для стилизации
<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.
Надеюсь, вы найдете это полезным!
person
Kesarion
schedule
22.05.2016