主要組件版本
- Angular: v7.2
- Angular Material: UI框架, v7.3
安裝、創(chuàng)建Angular項目
參考https://angular.io/guide/setup-local
必須安裝內(nèi)容：
- 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
根據(jù)提示選擇主題（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代碼。我們首先執(zhí)行UT
npm test
// or
ng test
將得到錯誤的結(jié)果：'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();
