यह काफी आसान है।
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
}
मैं प्रयोग किया है: पेज को बदल नहीं सकते और भूल जाओ हम कुछ के लिए :) खोज कर रहे थे - मान लें कि हम अपने ListComponent में एक विधि है कि पेज में परिवर्तन और अन्य सभी मापदंडों बरकरार (खोज से संबंधित मानकों की तरह रहता है चलो अंडरस्कोर मेरे निजी, इंजेक्शन रूटपेरम्स ऑब्जेक्ट से पैरामीटर के मौजूदा मानचित्र को पृष्ठ पैरामीटर असाइन करने के लिए। उस मानचित्र को नेविगेट पर अपडेट किया गया है, इसलिए हम सभी अच्छे हैं, बस याद रखें कि आप इसे सीधे नहीं बदल सकते हैं, यह imutable है।
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);
}
// 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 ]);
}
}
PaginationComponent:
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) - मैं
012 स्टाइल के लिए बूटस्ट्रैप का उपयोग करता हूं लेख सूची टेम्पलेट में
उपयोग:
...
<pagination *ngIf="list.pages > 1" [(list)]="list" (change)="page($event)" class="text-center"></pagination>
...
मेरी छोटी परियोजना में लेख सेवा रेंज हेडर का उपयोग कर सर्वर से लेख की एक श्रृंखला अनुरोध करता है।
आशा है कि आपको यह सहायक लगेगा!
पेजिंग घटक कई स्थानों पर फिर से उपयोग किया जाएगा, इसलिए राउटरलिंक को पारित करने वाले पैरामीटर ज्ञात नहीं हैं। इससे कोई अतिरिक्त मार्ग पैरामीटर भी खो जाएगा जो बाद में जोड़ा गया है (उदा। अतिरिक्त फ़िल्टर)। –