angular material 框架使用步骤（以及分页栏自定义）
我喜欢直接给代码或者截图说明，所有的口头上说的都是垃圾，解决不了问题
注：先吐槽一下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.
如果我有帮助到你，那就随手给我一个赞吧~