在角2应用程序中将数据组件绑定到表格显示组件

Question

我有分页工作在我的角2应用程序，利用方便的NG2分页模块。现在我希望能够在组件之间传递信息。我有几个具有唯一api调用的组件，它们都将它们的内容加载到相同的表格显示中。因此，该表格显示是具有表格视图的组件。

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

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

然后，在“tabular-display”组件中，我使用@ data ()装饰器访问这些记录数据，如下所示：

@Input() records = [];

在tabular-display视图中，我将遍历该记录数组，然后通过分页管道传递它们，如下所示：

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

现在，在'tabular-display‘视图的这个区域下面，分页管道使用“分页-控件”来处理从上面的*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页的记录。
• 将上面的值设置为记录，更改检测将处理其余的内容。