我喜歡直接給程式碼或者截圖說明，所有的口頭上說的都是垃圾，解決不了問題

注：先吐槽一下angular material這個垃圾官網，真的是坑，如果你按照他的方法那就等著吃屎吧

開始：

1.在控制檯埠輸入：npm install --save @angular/material @angular/cdk

2.在你的package.json檔案裡把上一步下載的版本更改為（只能使用這兩個版本，不然你會走和我一樣的彎路）： 
"@angular/cdk": "^5.0.0-rc.3"
 "@angular/material": "^5.0.0-rc.3"

3.在控制檯埠輸入： npm install

4.在你想引用material功能或者樣式的地方的Module檔案下，直接複製上去：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { QuestionComponent, questionAdd, MatPaginatorIntlCro } from './question/question.component';
import { BrowsersComponent } from './browsers.component';
import {
 MatAutocompleteModule,
MatButtonModule,
 MatButtonToggleModule,
 MatCardModule,
MatCheckboxModule,
 MatChipsModule,
 MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
 MatMenuModule,
 MatNativeDateModule,
 MatPaginatorModule,
MatProgressBarModule,
 MatProgressSpinnerModule,
  MatRadioModule,
 MatRippleModule,
 MatSelectModule,
 MatSidenavModule,
 MatSliderModule,
 MatSlideToggleModule,
  MatSnackBarModule,
 MatSortModule,
 MatTableModule,
 MatTabsModule,
 MatToolbarModule,
 MatTooltipModule,
MatStepperModule,
} from '@angular/material';
import {HttpModule} from '@angular/http';
import {CdkTableModule} from '@angular/cdk/table';
import { MatPaginatorIntl} from '@angular/material';

//換行繼續新增：
@NgModule({
 exports: [
  CdkTableModule,
   MatAutocompleteModule,
   MatButtonModule,
 MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
MatStepperModule,
  MatDatepickerModule,
 MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
 MatIconModule,
MatInputModule,
 MatListModule,
  MatMenuModule,
 MatNativeDateModule,
 MatPaginatorModule,
 MatProgressBarModule,
 MatProgressSpinnerModule,
 MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
 MatSlideToggleModule,
 MatSnackBarModule,
 MatSortModule,
   MatTableModule,
MatTabsModule,
  MatToolbarModule,
 MatTooltipModule,
]
})
export class DemoMaterialModule {}
@NgModule({
 imports: [
 BrowserModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpModule,
  DemoMaterialModule,
   MatNativeDateModule,
   ReactiveFormsModule,
  CommonModule,
 ShareModule,
 RouterModule.forChild(settingroutes),
   PaginationModule.forRoot(),
 NgxPaginationModule
 ],
 entryComponents: [BrowsersComponent,questionAdd,planWindow],
  declarations: [BrowsersComponent,questionAdd,planWindow],
  bootstrap: [BrowsersComponent,questionAdd,planWindow]
})
export class BrowsersModule { }

配圖：這個檔案。

5.然後在你想要加mdl（也就是angular material）的conmponent中加入對應的元件

比如：我加的

6，完成 ，執行； 輸入：npm start

angular material修改分頁顯示


1.在conmponent最下方新增，
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = '當前頁數';
  nextPageLabel = '下一頁';
  previousPageLabel = '上一頁';
  getRangeLabel = function (page, pageSize, length) {
    if (length === 0 || pageSize === 0) {
      return '0 od ' + length;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ?
      Math.min(startIndex + pageSize, length) :
      startIndex + pageSize;
    return '第' + (startIndex + 1) + ' - ' + endIndex + ' 條，總共：' + length + '條';
  };
}

配圖：

2.繼續在這個檔案上方新增  import { MatPaginator, MatPaginatorIntl } from '@angular/material';


3.在這個檔案對應的Module檔案裡新增
import { MatPaginatorIntl} from '@angular/material';
import { QuestionComponent, questionAdd, MatPaginatorIntlCro } from './question/question.component';（這裡我是在question.component.ts裡新增的這個，所以這裡是需要從這個元件引入）

4.在有 imports 的NgModule裡，新增providers，就搞定了
 providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}]

5.完成，搞定。npm start.

如果我有幫助到你，那就隨手給我一個贊吧~