angular-安装material

angular生态肥肠强大，配套设施十分健全，material就是其中表现之一。
material是材料库的意思，它是angular自带的UI库，有了它基本可以满足日常开发需求。
默认material是不安装的，需要我们手动安装，安装的时候一定注意版本号问题。
我本地的angular版本是8，因此material也只能装8版本的。

安装

一个省事的做法是在package.json文件下直接写明准确的版本号信息，然后用cnpm install命令默认安装所有。

{
  "name": "prime",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.1",
    
    "@angular/material": "^8.0.3",

    "@angular/cdk":"^8.0.2",
    "@angular/common": "~8.0.1",
    "@angular/compiler": "~8.0.1",
    "@angular/core": "~8.0.1",
    "@angular/forms": "~8.0.1",
    "@angular/platform-browser": "~8.0.1",
    "@angular/platform-browser-dynamic": "~8.0.1",
    "@angular/router": "~8.0.1",


    "chart.js": "^2.8.0",
    "core-js": "^3.8.0",
    "font-awesome": "^4.7.0",
    "primeicons": "^1.0.0",
    "primeng": "^8.0.0",
    "quill": "^1.3.6",

    
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

需要注意的是，在使用material模块时，必须保证已经安装了其他两个模块——cdk和animations。
cdk是弹出层相关的模块，而animations则是动画相关的模块。

引入css

安装了material模块后还不行，我们还必须手动引入一下css样式。
src/styles.css是我们全局注入的样式，可以在这里面import即可。
src/styles.css:

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

全局注入

首先在根模块app.module中注入所需的模块。
app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

//浏览器支持动画
import { BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations'


//material相关的模块
import {MatGridListModule} from '@angular/material';




//primeng相关的模块
import {DropdownModule} from 'primeng/dropdown';


//根组件
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    NoopAnimationsModule,
    DropdownModule,

    
    MatGridListModule //注入
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后在视图中就可以使用了。
app.component.html：

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile
      *ngFor="let tile of options"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

app.component.ts：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options: any;

  constructor() {
    this.options = [
      { text: 'One', cols: 3, rows: 1, color: 'lightblue' },
      { text: 'Two', cols: 1, rows: 2, color: 'lightgreen' },
      { text: 'Three', cols: 1, rows: 1, color: 'lightpink' },
      { text: 'Four', cols: 2, rows: 1, color: '#DDBDF1' },
    ];
  }


}