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

Question

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

我已经通过使用方括号表示法来结合“记载”，这样的结合与所述数据与表格视图组件中的组件：

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

然后，在“tabular-显示”组件我使用的@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

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

• 用户单击第二页，发出该事件。
• 从您的http请求中获取第2页记录，或者无论您的来源是什么。
• 设置上述值记载，并改变检测将采取其余