2017-07-31 71 views
0

我使用角度爲2的材料設計。我想爲我的應用程序使用材料設計分頁器,並獲取組件中當前選定的頁面索引。沒有了分頁程序plugin.here多文檔材料分頁程序頁面:https://material.angular.io/components/paginator/overviewangular 2材料paginator獲取當前頁面索引

HTML代碼

<md-paginator [length]="100" 
       [pageSize]="10" 
       [pageSizeOptions]="[5, 10, 25, 100]"> 
</md-paginator> 

角2碼

@Component({ 
    selector: 'paginator-overview-example', 
    templateUrl: 'paginator-overview-example.html', 
}) 
export class PaginatorOverviewExample { 
    //I want to get page change event here 
} 
+0

,因爲我在他的API https://material.angular.io/components/paginator/api看到,有頁面索引 –

+0

的@Output我怎麼能實現呢?如何在paginator中獲得更改事件? –

+0

看看他的例子「pageEvent」是使用https://material.angular.io/components/paginator/examples –

回答

2

您可以獲得當前頁面索引使用page輸出事件。所述$eventpage返回三種信息:

  • 的PageIndex
  • 的pageSize
  • 長度

HTML:

<md-paginator [length]="length" 
       [pageSize]="pageSize" 
       [pageSizeOptions]="pageSizeOptions" 
       (page)="onPaginateChange($event)"> 
</md-paginator> 

TS:

onPaginateChange(event){ 
    alert(JSON.stringify("Current page index: " + event.pageIndex)); 
    } 

Plunker demo

+0

解決方案工作! –