主要组件版本
- Angular: v7.2
- Angular Material: UI框架, v7.3
安装、创建Angular项目
参考https://angular.io/guide/setup-local
必须安装内容：
- node.js: v10+
- Angular CLI
npm install -g @angular/cli
加入Angular Material
https://material.angular.io/: UI框架 （Material Design components for Angular. ）
安装 Angular Material
ng add @angular/material
根据提示选择主题（theme），css语言等。
添加第一个组件
添加引用
//app.module.ts
import { MatSliderModule } from '@angular/material/slider';
…
@NgModule ({....
imports: [...,
MatSliderModule,
…]
})
// app.component.html 使用<mat-slider>
<mat-slider min="1" max="100" step="1" value="1"></mat-slider>
运行、查看效果
npm start
浏览器打开 http://localhost:4200 ，效果:
mat-slider.PNG
单元测试 （Unit Test）
使用AngularCLI，自动生成UT代码。我们首先执行UT
npm test
// or
ng test
将得到错误的结果：'mat-slider' is not a known element。
这是因为自动生成的component 和UT，不能自动添加mat-slider的引用。解决办法，
// app.component.spec.ts
import { MatSliderModule } from '@angular/material/slider';
// ...
TestBed.configureTestingModule({
imports: [
RouterTestingModule,
MatSliderModule // import MatSlider
],
declarations: [
AppComponent
],
}).compileComponents();
