3

ng2-bootrap を使用して、angular2 アプリにページネーションを実装しようとしています。http://valor-software.github.io/ng2-bootstrap/#paginationに従っています

私のapp.html

<div>
    <div class="col-lg-12 text-right">
        <pagination [totalItems]="totalItems" [itemsPerPage]='2' (pageChanged)="pageChanged($event)" [(ngModel)]="currentPage" [maxSize]="maxSize"
        class="pagination-sm" [boundaryLinks]="true"></pagination>
    </div>
</div>

私のコンポーネント

import { Component, View, Inject} from 'angular2/core';
import { CORE_DIRECTIVES } from 'angular2/common';
import { PAGINATION_COMPONENTS } from 'ng2-bootstrap/ng2-bootstrap';

// webpack html imports
@View({
    templateUrl: '/scripts/src/components/demo/demo.html',
    directives: [PAGINATION_COMPONENTS, CORE_DIRECTIVES]
})
@Component({
    selector: 'tabs-demo',
})
export class DemoComponent {
    private totalItems: number = 64;
    private currentPage: number = 4;

    private maxSize: number = 5;
    private bigTotalItems: number = 175;
    private bigCurrentPage: number = 1;

    private setPage(pageNo: number): void {
        this.currentPage = pageNo;
    };

    private pageChanged(event: any): void {
        console.log('Page changed to: ' + event.page);
        console.log('Number items per page: ' + event.itemsPerPage);
    };
}

ページネーションをクリックせずにpageChangeイベントを複数回トリガーします

ここに画像の説明を入力

4

3 に答える 3

1

ユーザーがページネーションをクリックしたときにのみ「pageChanged」イベントをトリガーする場合は、ページブロックの設定を次のように変更できます。

public set page(value) {
    var _previous = this._page;
    this._page = (value > this.totalPages) ? this.totalPages : (value || 1);
    if (_previous !== this._page && typeof _previous !== 'undefined') {
        this.pageChanged.emit({
            page: this._page,
            itemsPerPage: this.itemsPerPage
      });
    }
}
于 2016-02-05T19:55:48.647 に答える
1

このイベントは、コンポーネントのプロパティが更新されるたびに実際にトリガーpageされます (これは、UI からの操作なしでプログラムで実行できます)。

実際、このイベントはpagination、次の理由により、コンポーネントの初期化時に 3 回トリガーされます。

  • ngInitメソッドから。これは、コンポーネントのライフサイクルの一部です。

    export class Pagination implements ControlValueAccessor, OnInit, IPaginationConfig, IAttribute {
  (...)

  ngOnInit() {
    (...)
    this.page = this.cd.value;
    (...)
  }

  (...)
}

  • writeValueメソッドから。コンポーネントが ngModel に準拠しているため、このメソッドが呼び出されます。に関連付けられている式ngModelが更新されると、このメソッドが新しい値で呼び出されます。初期化中に、writeValueメソッドは 2 回呼び出されます。最初はnull値で、次に値で呼び出され1ます。

    export class Pagination implements ControlValueAccessor, OnInit, IPaginationConfig, IAttribute {
  (...)

  writeValue(value:number) {
    this.page = value;
    this.pages = this.getPages(this.page, this.totalPages);
  }

  (...)
}

つまり、この初期化フェーズの後、更新pageChangedごとに 1 回だけトリガーされます。page

編集

ng2-bootstrap のコードを見た後、ページネーション コンポーネントのコードを更新せずにそれを行う方法がわかりません。

このクラスで実行できる更新は次のnode_modules/ng2-bootstrap/components/pagination/pagination.tsとおりです (ファイル )。

  • プロパティが次set pageの場合にのみイベントをトリガーするようにブロックを更新します。initedtrue

    public set page(value) {
  this._page = (value > this.totalPages) ? this.totalPages : (value || 1);

  if (this.inited) { // <---------------
    this.pageChanged.next({
      page: this._page,
      itemsPerPage: this.itemsPerPage
    });
  }
}

  • 最後にプロパティを truengOnInitに設定しないようにメソッドを更新します。inited

    ngOnInit() {
  (...)
  //this.inited = true;
}

  • initedの最初の呼び出しの最後に、プロパティを true に設定しwriteValueます。

    writeValue(value:number) {
  this.page = value;
  this.pages = this.getPages(this.page, this.totalPages);

  if (!this.inited) {
    this.inited = true;
  }
}

このようにして、pageChangedイベントはページネーションの初期化フェーズで 1 回だけ呼び出されます。

お役に立てば幸いです、ティエリー

于 2016-01-29T10:01:20.557 に答える
0

または、ng2 ブートストラップの代わりにカスタム ページネーション サービスを試すこともできます。Google検索結果などのロジックを使用するこのページネーションの例を投稿しました。

ページネーション ロジックを処理するPagerService :

import * as _ from 'underscore';

export class PagerService {
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

ページャー サービスを使用するAppComponent :

import { Component, OnInit } from '@angular/core';

import * as _ from 'underscore';

import { PagerService } from './_services/index'

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent {
    constructor(private pagerService: PagerService) { }

    // dummy array of items to be paged
    private dummyItems = _.range(1, 151);

    // pager object
    pager: any = {};

    // paged items
    pagedItems: any[];

    ngOnInit() {
        // initialize to page 1
        this.setPage(1);
    }

    setPage(page: number) {
        if (page < 1) {
            return;
        }

        // get pager object from service
        this.pager = this.pagerService.getPager(this.dummyItems.length, page);

        // get current page of items
        this.pagedItems = this.dummyItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
    }
}

ページ アイテムとページャー コントロールを表示するAppComponent HTML :

<div>
    <div class="container">
        <div class="text-center">
            <h1>Angular 2 - Pagination Example with logic like Google</h1>

            <!-- items being paged -->
            <div *ngFor="let item of pagedItems">Item {{item}}</div>

            <!-- pager -->
            <ul *ngIf="pager.pages.length" class="pagination">
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(1)">First</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(pager.currentPage - 1)">Previous</a>
                </li>
                <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                    <a (click)="setPage(page)">{{page}}</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.currentPage + 1)">Next</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.totalPages)">Last</a>
                </li>
            </ul>
        </div>
    </div>
</div>

詳細と動作するデモは、この投稿で入手できます。

于 2016-08-25T00:44:16.257 に答える