2 回答

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
您需要將分頁(yè)器與Angular的路由器連接。
例如,假設(shè)您按如下所示構(gòu)造了路徑路徑:
http://my/url/to/table/component?page=2
在這種情況下,您可以從URL到表中獲取頁(yè)面索引2,如下所示:
組件類(lèi)別:
class MyComponent {
pageIndex = this.activatedRoute.queryParams.pipe(
map(params => params['page'])
);
constructor(activatedRoute: ActivatedRoute) {}
}
模板:
<mat-paginator [pageIndex]="pageIndex | async"></mat-paginator>
到目前為止,URL將驅(qū)動(dòng)該表?,F(xiàn)在,當(dāng)用戶使用分頁(yè)器瀏覽表格時(shí),您還需要更新URL:
模板:
<mat-paginator [pageIndex]="pageIndex | async" (page)="pageChange($event)"></mat-paginator>
組件類(lèi)別:
class MyComponent {
pageIndex = this.activatedRoute.queryParams.pipe(
map(params => params['page'])
)
constructor(activatedRoute: ActivatedRoute, router: Router) {}
pageChange(e: PageEvent): void {
this.router.navigate( /* ... */ );
}
}
現(xiàn)在,隨著用戶在表中瀏覽時(shí)URL正在更新,這使路由器可以在用戶返回到以前訪問(wèn)的URL時(shí)驅(qū)動(dòng)表。
添加回答
舉報(bào)