在可重用组件上使用ngx-pagination

Question

我试图在可重用的数据表组件上使用ngx-pagination，但是一个表中的更改会影响页面上其他表的更改。我怎样才能确保分页事件一次只发生在一个组件上？

table.component.html

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                <label>{{col.header}}</label>
            </th>
        </tr>
    </thead>
    <tbody>    
        <tr *ngFor="let row of data | paginate: { itemsPerPage: 6, 
           currentPage: p }">`
            <td *ngFor="let col of cols">
                {{row[col.prop]}}
            </td>
        </tr>
    </tbody>
</table>

<pagination-controls 
class="my-pagination" 
(pageChange)="p = $event">
</pagination-controls>

table.component.ts

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})

export class DataTableComponent {

  @Input() data
  @Input() cols
  p: number = 1

}