（时隔2个多月终于有时间来写博文了）
先总结一下，11月接到一个项目，做到12月然后停工准备考试，到1月才重新开始工作，把一些收尾工作做了，这个项目也是第一次用 Angular Material2 组件，其中还是有一些坑的，就记录一下
这是Angular Material官网

一、安装Angular Material

首先根据官网的指导Get Start安装Material
坑1： 安装完的 Angular Material，有时候不能 AOT预编译，这个时候要看依赖包文件，我是用 webpack 这个框架，所以看package.json就可以看到所有依赖包

依赖包
依赖包

可以看到，除了"@angular/material": "^5.0.0-rc0"为5.0.0之外，还有其他包也要升级，至少要升级到5.0.0
坑2：即使你已经升级到最新版，还有可能不能AOT编译，当初这个问题搞了我好久，（也不久，就一个晚上），然后就有种直觉是框架的问题，第二天果断换框架，其实也就是升级框架，之前用的是 webpack6，看了github发现 webpack 已经有7了，果断换成webpack7，然后就能 AOT预编译了
总结：一开始遇到问题是很正常的，这还是第一步，所以第一步不好好解决的话，后面的工作会很难开展的，幸好是项目一开始就发现不能AOT预编译的问题，不然到后期大改就很麻烦了

二、使用Angular Material

关于怎么使用 Angular Material 官网并没有说明怎么用，一开始我以为引入组件就能用的，其实并不是，看了官网的例子也没有说，之后通过官网在线编辑，才发现玄机

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import {CdkTableModule} from '@angular/cdk/table';

@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 {}

在官网的在线编辑的main.ts（或者app.module.ts）里面，是有以上两段代码的，这就是把所有的material组件作为一个module，然后再把这个module放到整个项目内唯一一个AppModule里面，就像官网做的那样


这样就能成功引用组件了

三、常用组件用法

1、button
button是最基础的组件，最常用的就是提交表单的时候，这里用一个验证码的例子来说明button怎么用

这里点击获取验证码后就disable使按钮不可点击，然后再根据后端返回值，来进行倒数



倒计时代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//倒计时
countdown = 30;
setTime(obj){
  if(this.countdown==0){
    this.disablebtn = false;
    this.tipstring = "获取验证码";
    this.countdown = 30;
    return;
  }else{
    this.disablebtn = true;
    this.tipstring = "（"+this.countdown+"s）";
    this.countdown--;
  }
  setTimeout(()=>{
    this.setTime(obj);
  },1000)
}

这样，要一个变量控制是否disable按钮，然后根据业务逻辑自己调整即可
2、tabs

tabs
tabs

这里主要讲 tabs的事件怎么用
1
2
3
4
5
<!-- html -->
<mat-tab-group (selectedTabChange)="select($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

1
2
3
4
5
6
7
8
9
10
11
12
//ts
select = (tabChangeEvent: MatTabChangeEvent): void => {
    console.log(tabChangeEvent.index);
    switch (tabChangeEvent.index) {
      case 0: {
          ...
      } break;
      case 1: {
          ...
      } break;
    }
  };

上面的 tabChangeEvent.index就是你现在选中的tab，根据不同的tab可以做不同的事情
3、snackbar

snackbar
snackbar

snackbar 就相当于 Android 的 toast，为了提醒用户一些信息的
snackbar 不难，重点在于它可以复用 ，它有一个属性data可以用来传值
传值
传值

之后只需要在snackbar组件中就可以用 data属性了
4、dialog
对话框是一个很重要的交互方式，它可以用于提醒用户信息，也可以用来进行一些输入，这里给出一个复用的例子，用于通知用户一些信息
1
2
3
4
5
6
7
8
9
<!-- html -->
<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
  <p>{{data.content}}</p>
</div>
<div mat-dialog-actions align="center">
  <button *ngIf="data.isOkButton" mat-button (click)="data.OkEvent()" tabindex="2">{{data.OkButtonContent}}</button>
  <button *ngIf="data.isNoButton" mat-button (click)="data.NoEvent()" tabindex="1">{{data.NoButtonContent}}</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export class CustomDialogNoticeComponent{
  constructor(
    public dialogRef: MatDialogRef<CustomDialogNoticeComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
  }

}
export interface CustomDialogData{
  title:string;
  content:string;
  isOkButton:boolean;
  isNoButton:boolean;
  OkEvent?:Function;
  NoEvent?:Function;
  OkButtonContent?:string;
  NoButtonContent?:string;
}

这样，就可以在打开这个对话框的时候，传一个 CustomDialogData的对象，就能根据这些信息配置对话框
5、datepicker
这里主要讲怎么换成中文，因为默认是按照老美那边的标识的，所以要用在我们这边，就需要做一些改动
首先，安装 momentjs

momentjs: JavaScript 日期处理类库

npm install moment --save
然后按照官网的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Component({
  ...
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    { provide: MAT_DATE_LOCALE, useValue: 'zh-cn' },

    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
  ],
})
  ...

将{ provide: MAT_DATE_LOCALE, useValue: 'zh-cn' },的useValue改成'zh-cn就是中文了，具体时区代号参考

##四、总结
总的来说 Angular Material 组件集成了很多东西，也方便了我们的使用，适合敏捷开发，但是会带来一些依赖性的问题，比如你要为了使用 Angular Material 而改变接口的格式或者和后端的一些对接问题。但是 Angular Material 可以更加复用，我只是很低程度的复用而已