gpt4 book ai didi

pagination - ng2-bootstrap pagination pageChanged 触发多次

转载 作者:太空狗 更新时间:2023-10-29 18:34:59 28 4
gpt4 key购买 nike

我正在尝试使用 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事件

enter image description here

最佳答案

实际上每次更新组件的 page 属性时都会触发该事件(这可以通过编程方式完成,无需与 UI 进行任何交互)。

其实这个事件在初始化pagination组件时触发了3次,原因如下:

  • 来自 ngInit 方法。这是组件生命周期的一部分。

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

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

    (...)
    }
  • 来自 writeValue 方法。调用此方法是因为该组件是 ngModel 兼容的。当 ngModel 中关联的表达式更新时,将使用新值调用此方法。在初始化期间,writeValue 方法被调用两次:第一次使用 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 只会在每次 page 更新时触发一次。

编辑

在查看了 ng2-bootstrap 的代码后,如果不更新分页组件的代码,我不知道该怎么做。

以下是您可以在此类中进行的更新(文件 node_modules/ng2-bootstrap/components/pagination/pagination.ts):

  • 更新 set page block 以仅在 inited 属性为 true 时触发事件:

    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
    });
    }
    }
  • 更新 ngOnInit 方法,不要在其末尾将 inited 属性设置为 true:

    ngOnInit() {
    (...)
    //this.inited = true;
    }
  • 在第一次调用 writeValue 结束时将 inited 属性设置为 true:

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

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

这样,pageChanged 事件只会在分页初始化阶段被调用一次。

希望对你有帮助,蒂埃里

关于pagination - ng2-bootstrap pagination pageChanged 触发多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35081261/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com