angular - 如何将分页连接到两个组件之间的数据源

问题描述

我有一个面板（布局组件 - 父级），如下所示：

虽然在同一个组件中添加分页很容易，但让它在不同的组件中工作并不容易。至少对我来说。我已经用谷歌搜索并检查了 SO，但只找到了奇怪的答案，将一个组件导入另一个组件，或者父（表）-> 子（分页）。我需要完全相反的。我已经尝试通过@Input() 将 Layout(P) 与 Table(C) 连接起来。基本上，this.paginator进入 Table 组件，它工作到我写的地方this.dataSource.paginator = this.paginator。在那之后，我不知道该做什么或如何将数据返回到 Layout 组件以实际看到分页中的一些变化。

这可能有点令人困惑，但非常感谢任何帮助。

标签： angularangular-material

也许我不明白你的问题，我明白你需要在两个组件中共享相同的分页，如果你需要的话，你可以试试这个：

创建服务，例如 paginationService ：

export class PaginationService {
constructor(){}
private _pageNumber: BehaviorSubject<any> = new BehaviorSubject<any>(null);
public pageNumber: Observable<any> = this._pageNumber.asObservable();
public setNewPage(page) {
    this._pageNumber.next(page);
}
}

在第一个组件中：

constructor(private paginationService  : PaginationService ){}

changePagination(page): void {
    this.paginationService .setNewPage(page);
}

在第二个组件中：

public currentPage: any = 1;
 constructor(private paginationService  : PaginationService ){}
 ngOnInit(): void {
   this.paginationService.pageNumber.subscribe(res => { this.currentPage=res})
 }

angular - 如何将分页连接到两个组件之间的数据源

问题描述

解决方案

推荐阅读