Question

我在同一页面上有两个引导表，一个表在主组件中，另一个在子组件中，我使用模块中的服务声明如下：

import { NgModule }       from "@angular/core";
import { CommonModule }   from "@angular/common";
import { CashierRiskProfileComponent }    from "./cashierriskprofile.component";
import { CashierRiskProfileService }   from "./cashierriskprofile.service";
import { CashierRiskProfileRouting } from "./cashierriskprofile.routing";
import { SharedModule } from "../shared/shared.module";
import {PaginationControlsCmp, PaginatePipe, PaginationService} from "ng2-pagination";
import { GenericExceptionComponent }      from "../shared/genericcomponents/genericexception.component";

@NgModule({
    imports: [
        CommonModule,
        SharedModule,
        CashierRiskProfileRouting
    ],
    declarations: [
        PaginationControlsCmp, PaginatePipe, CashierRiskProfileComponent, GenericExceptionComponent
    ],
    providers: [
        PaginationService, CashierRiskProfileService
    ]
})
export class CashierRiskProfileModule { }

CashierRiskProfileComponent是父组件，在其html中使用了GenericExceptionComponent选择器，它是子组件，并且都具有带分页的引导表。这里的问题是隔离两个网格之间的分页，当一个表页面发生变化时，它也会改变子组件表的页面，反之亦然。我试图把那个paginationControlsCmp，PaginatePipe放在sharedModule中但没有用。我认为这需要修复？

我认为似乎是使用Angular 2 RC 6的ng2-pagination的隔离问题，在RC 5中它曾经工作得很好，因为我曾经使用指令，管道在各个组件中它只是工作正常，因为有没有共享此分页类型的通用模块，但在RC 6指令中，不推荐使用管道我不能再在组件中使用它们，但只能在模块级别使用，这会导致在同一页面上的两个组件上出现分页问题

Answer 1

我没有看到html代码，但是你可能正在使用相同的当前页面变量。

<pagination-controls (pageChange)="p2 = $event" id="second"></pagination-controls>

注意id =“second”和p2 = $ event。

    <ul>
      <li *ngFor="let item of collection | paginate: { id: 'second', itemsPerPage: 10, currentPage: p2 }">{{ item }}</li>
    </ul>

在这里告诉paginate使用什么变量。

Plunker：http://plnkr.co/edit/9cMKPK6fxHPnKRTaXTEQ?p=preview

当分页用于同一页面上的多个引导表时，ng2-Pagination问题

1 个答案: