在Angular 2 App中将数据组件绑定到表格显示组件

Question

我使用方便的 ng2-pagination 模块在我的 Angular 2 应用程序中进行分页。现在我希望能够在 组件之间传递信息。我有几个具有独特 api 调用的组件，它们都将它们的内容加载到同一个表格显示中。该表格显示因此是具有表格视图的组件。

我已经将带有数据的组件绑定到带有表格视图的组件，方法是使用方括号表示法绑定“记录”，如下所示：

<tabular-display [records]="records"></tabular-display>

然后，在“表格显示”组件中，我使用 @Input() 装饰器来访问这些记录数据，如下所示：

@Input() records = [];

在表格显示组合视图中，我正在遍历该记录数组，然后将它们通过分页管道传递，如下所示：

<tr *ngFor="let record of records.data | paginate: { id: 'clients', itemsPerPage: 12, currentPage: page, totalItems: records.count }">

现在，就在“表格显示”视图中的该区域下方，分页管道使用“分页控件”来处理从上面的 *ngFor 迭代生成正确数量的页面。看起来像这样：

    <pagination-controls class="paginator" (pageChange)="pageChange($event)" id="clients"
            maxSize="15"
            directionLinks="true"
            autoHide="true">
    </pagination-controls>

我的最后一项任务是让您在上面看到的这个“pageChange()”事件将该事件传递给数据组件——这样就可以调用正确的数据。如何最好地做到这一点？我已经使用 @Output() 和 EventEmitter() 进行了尝试：

@Output() sendChange = new EventEmitter();

pageChange($event) {
    this.sendChange.emit(this.page);
    console.log($event);
}

我得到了正确的页码打印到控制台。但是数据组件如何获取（即访问）发出的数据？它如何“接收”发出的数据？

顺便说一句，这是我需要将页面更改事件传递给的函数。数据组件中的这个函数如何获取表格显示组件发出的事件？

getPageByCategory(page) {
    this.clientsService.getByCategory('consulting', page, this.pagesize)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.page = page;
            console.log(page);
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

Answer 1

在 pageChange 上，更改/获取记录的内容及其对应的页面。更改检测将自动更新您的表格显示组件。

• 用户单击第二页，发出该事件。
• 从您的 http 请求或任何来源获取第 2 页记录。
• 将上述值设置为记录，其余部分由变更检测处理